如何调整flutter中的svg个文件大小

Question

我已经使用 package Flutter SVG将 SVG 图标资产添加到我的 flutter 应用程序。 它按预期工作，当我将它用作普通小部件时，我可以通过向其添加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 ，它永远不会调整大小。

Answer 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,
              ),
            ),
          ),

共享文本字段表单

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,
      ),
    );
  }
}

Answer 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',
                ),
              ),

只需将填充添加到您的前缀图标..

Answer 3

您是否尝试过使用Container小部件包装SvgPicture并添加alignment ？

Container(
  height: 100,
  width: 100,
  alignment: Alignment.center, // <---- The magic
  padding: const EdgeInsets.all(12),
  child: SvgPicture.asset(
     'assets/icons/svg-image.svg',
     semanticsLabel: 'Image',
     height: 50,
     width: 50,
  ),
),

Answer 4

只需为 Svg 添加填充或添加 continer 而不是填充.....

   prefixIcon:Container(
           padding: EdgeInsets.all( MediaQuery.of(context).size.width * .04),     
           child: SvgPicture.asset('assets/icons/phone.svg')
                        ),