如何在颤动中调整svg文件的大小答案

【问题标题】：How to resize svg files in flutter如何在颤动中调整svg文件的大小
【发布时间】：2021-03-02 20:16:04
【问题描述】：

我使用包 Flutter SVG 能够将 SVG 图标资源添加到我的颤振应用程序中。它按预期工作，当我将它用作普通小部件时，我可以通过添加 width: xx 来调整它的大小.. 但是当我在 textField 中用作 prefixIcon 时，它没有被调整大小，这是我的代码：


                                      TextFormField(
                                        controller: vendorPasswordController,
                                        style:
                                        TextStyle(color: Colors.white),
                                        obscureText: passwordHidden,
                                        decoration: InputDecoration(
                                            enabledBorder:
                                            UnderlineInputBorder(
                                              borderSide: BorderSide(
                                                  color: Colors.white),
                                            ),
                                            prefixIcon:
                                            SvgPicture.asset(
                                              'assets/images/password_icon.svg',
                                              semanticsLabel: 'vendor_password',
                                              width: 20,
                                            ),
                                            suffixIcon: IconButton(
                                              icon:
                                              SvgPicture.asset(
                                                'assets/images/show_icon.svg',
                                                width: 20,
                                              ),
                                              onPressed: () {
                                                changePasswordHiddenState();
                                              },
                                            ),
                                            labelText: 'كلمة المرور',
                                            labelStyle: TextStyle(
                                                color: Colors.white,
                                                fontSize: 16)),
                                        validator: (value) {
                                          if (value.isEmpty) {
                                            return "كلمة المرور مطلوبة";
                                          }
                                          return null;
                                        },
                                      ),

请注意，我使用了另一个 SVG 资产作为 suffixICon，它与 width 参数完美配合。但作为PrefixIcon，它永远不会调整大小。

【问题讨论】：

找到方法了吗？

标签： android flutter svg icons assets

【解决方案1】：

我解决了这个问题

SharedTextFieldForm(
            icon: Container(
              alignment: Alignment.center,
              height: 40.tx,
              width: 20.tx,
              child: SvgPicture.asset(
                Images.person_icon,
                color: Theme.of(context).iconTheme.color,
                height: 25.tx,
                fit: BoxFit.fitHeight,
              ),
            ),
          ),

SharedTextFieldForm

class SharedTextFieldForm extends StatelessWidget {
  final Widget icon;

  const SharedTextFieldForm({
    Key key,
    this.icon,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        prefixIcon: Padding(
          padding: EdgeInsets.only(right: 12),
          child: icon ?? Container(),
        ),
        hintText: Strings.full_name.capitalize,
      ),
    );
  }
}

【讨论】：

【解决方案2】：

有点晚了，但这应该可行：

TextFormField(
                controller: tecEmail,
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: const EdgeInsets.all(14.0),
                    child: SvgPicture.asset('assets/images/user_icon.svg'),
                  ),
                  hintText: 'Username or email id',
                ),
              ),

只需在前缀图标中添加填充..

【讨论】：