首页 > 解决方案 > 在 TextFormField Flutter 中加载 svg

问题描述

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

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 如下图

任何帮助这是什么问题?

在此处输入图像描述

标签: fluttersvgflutter-layoutflutter-ios

解决方案


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

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: () {}))

推荐阅读