出现错误时如何在颤动中更改背景颜色文本框?

Posted

技术标签:

【中文标题】出现错误时如何在颤动中更改背景颜色文本框?【英文标题】:how to change background color textformfield in flutter when error condition? 【发布时间】:2021-08-13 11:23:43 【问题描述】:

当出现错误情况时如何在flutter中更改背景颜色?

我想像这样构建文本字段

这是我的代码

FormData 类扩展 StatefulWidget

@覆盖

FormDataState createState() => FormDataState();

类 FormDataState 扩展状态

  final formKey = GlobalKey<FormState>();

  TextEditingController _accidentCtrl = TextEditingController();

  TextEditingController _passCtrl = TextEditingController();

  bool kondisiObscure = true;

  bool inputteks  = false;


 void validateAndSave() 
final FormState form = formKey.currentState;
if (form.validate()) 
  inputteks  = false;

 else 
  inputteks  = true;


Padding(
                        padding: const EdgeInsets.only(top: 25, right: 25, left: 25),
                        child: Container(

                          width: 315,
                          decoration: BoxDecoration(
                            color: Color(0xffF2F3F5),
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: TextFormField(

                            validator: (value) 
                              if (value.isEmpty) 
                               return 'Harap diisi';
                              
                              else
                                inputteks = false;

                              
                            ,
                            textAlign: TextAlign.start,
                            decoration: InputDecoration(

                                fillColor: Color(0xfffaebeb),
                                filled: inputteks,
                                contentPadding: EdgeInsets.all(12),
                                border: InputBorder.none,
                                focusedBorder: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(10.0),
                                  borderSide:  BorderSide(color: Color(0xff3F8AE0) ),

                                ),
                                enabledBorder: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(10.0),
                                  borderSide:  BorderSide(color: Colors.black12, width: 1),
                                ),
                                errorBorder: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(10.0),
                                  borderSide:  BorderSide(color: Color(0xffE64646) ),

                                ),
                                disabledBorder: InputBorder.none,),

                            autofocus: true,
                            controller: _accidentCtrl,
                            onChanged: (String value) 
                              formProvider.namatext(value);
                              _accidentCtrl.selection = TextSelection.fromPosition(TextPosition(offset: _accidentCtrl.text.length));
                              ,
                          ),
                        ),
                      ),

 Container(
            width: 200,
            height: 40,
            child: RaisedButton(
                onPressed: validateAndSave,
                color: ungu,
                shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(17),
                  ),
              child: Text(
                'Submit', style: putihstyle.copyWith(
                  fontSize: 16,),
                ),
            ),
          ),],
        ),

      ),
    ),

是对还是错?因为在文本字段中没有显示背景色

【问题讨论】:

这能回答你的问题吗? how to add a checker and a warning to TextField 不,没有解决,还有解决方案吗? 【参考方案1】:

设置inputteks时需要使用setState。只需将您的 validateAndSave 方法更改为:

void validateAndSave() 
   final FormState form = formKey.currentState;
   setState(() 
      inputteks = !form.validate()
   );

您还需要在 TextFormField 的 onChanged 中使用 setState。

【讨论】:

【参考方案2】:

我得到了一些关于这个案例的参考,你可以看看here,

你可以在here查看我的代码,希望对你有帮助^_^

【讨论】:

以上是关于出现错误时如何在颤动中更改背景颜色文本框?的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动/飞镖的 ListView 项目中更改背景颜色

在网格面板中动态更改 extjs 4 网格文本框背景颜色

颤动如何从 ListTile 更改所选图块的背景颜色

WinUI 3.0 桌面:文本框的背景颜色在鼠标悬停时更改

在颤动中更改标签栏的背景颜色

MFC:如何更改整个编辑框的背景颜色?