在 TextFormField Flutter 中加载 svg答案

【问题标题】：loading svg inside TextFormField Flutter在 TextFormField Flutter 中加载 svg
【发布时间】：2021-05-20 03:40:02
【问题描述】：

我想在 Flutter 中的TextFormField中加载一个 SVG 图像。我使用了this SVG 加载库。但是每次 svg 图像显示在中心并且 TextFormField 的提示文本没有显示。我想在TextFormField 的末尾加载 SVG。这是我的代码：

Form(
                    key: _formKey,
                    child: Column(
                      children: [
                        new RectWithBorder(AppColors.white, AppColors.gray, 1.0, BorderRadius.circular(6.0), new EdgeInsets.all(0.0), new Padding(
                            padding: new EdgeInsets.all(10.0),
                            child: TextFormField(
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  hintText: Strings.emailOrMobileText,
                                ),
                                keyboardType: TextInputType.text,
                                controller: emailController,
                                validator: Utils.isValidEmailOrMobile,
                                onSaved: (String value){
                                  this.email = value;
                                },
                            ))),
                        new RectWithBorder(AppColors.white, AppColors.gray, 1.0, BorderRadius.circular(6.0), new EdgeInsets.fromLTRB(0, 10.0, 0, 0), new Padding(
                            padding: new EdgeInsets.all(10.0),
                            child: TextFormField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: Strings.passwordText,
                              suffixIcon: new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new SizedBox(
                                  height: 20,
                                  child: SvgPicture.asset("assets/images/invisible.svg"),
                                ),
                              ),
                            ),
                            keyboardType: TextInputType.text,
                            obscureText: true,
                            validator: _validatePassword,
                            onSaved: (String value){
                              this.password = value;
                            },
                          ),)
                        ),
                        new RoundedButton(
                          title: Strings.loginButtonText.toUpperCase(),
                          backgroundColor: AppColors.accent,
                          radius: 6.0,
                          textStyle: new TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: AppColors.white),
                          textColor: AppColors.white, margin: new EdgeInsets.fromLTRB(0, 20, 0, 0), onPressed: (){
                          Utils.isConnectedToInternet().then((isConnected){
                            if(isConnected == null || !isConnected){
                              Utils.showSnackBar(context, Strings.noInternetConnection);
                            } else{
                              // _verifyCaptcha();
                              _executeLogin(email, password);
                            }
                          });
                        },),

                        new Container(
                            margin: new EdgeInsets.fromLTRB(0, 30.0, 0, 0),
                            child: new GestureDetector(
                              child: Text(
                                Strings.forgotPasswordText,
                                style: new TextStyle(
                                    color: AppColors.primary,
                                    fontSize: 15.0
                                ),
                              ),
                            ))
                      ],
                    ),
                  ),

但它显示 SVG 如下图

任何帮助这是什么问题？

【问题讨论】：

可能您的文本字段在RectWithBorder 内折叠，这就是为什么后缀图标位于中心的原因。尝试为其设置背景颜色并检查它是否正确。另外请提供RectWithBorder的代码以了解它是什么

标签： flutter svg flutter-layout flutter-ios

【解决方案1】：

从这里替换你的装饰代码。

decoration: InputDecoration(
              hintText: "Password",
                isDense: true,
                suffixIconConstraints: BoxConstraints(
                  minWidth: 2,
                  minHeight: 2,
                ),
                suffixIcon: InkWell(
                    child: new Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: new SizedBox(
                        height: 20,
                        child: 
                        SvgPicture.asset("assets/images/invisible.svg"),
                      ),
                    ), onTap: () {}))

【讨论】：