Question

我正在填写登录表单，但由于错误，我想更改我的TextFormField的颜色。目前，我正在使用Bloc体系结构和状态管理。

这是我希望文本字段出现错误时的图片。

Answer 1

只需使用文本验证并对其进行测试。

这是一个通用示例：

class MyHomePageState extends State<MyHomePage> {
  final _text = TextEditingController();
  bool _validate = false;

  @override
  void dispose() {
    _text.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Textfield validation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('form cant be empty'),
            TextField(
              controller: _text,
              decoration: InputDecoration(
                filled: _validate,
                fillColor: Colors.red,
                labelText: 'Enter the Value',
                errorText: _validate ? 'Value Can\'t Be Empty' : null,
              ),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _text.text.isEmpty ? _validate = true : _validate = false;
                });
              },
              child: Text('Submit'),
              textColor: Colors.white,
              color: Colors.blueAccent,
            )
          ],
        ),
      ),
    );
  }
}

Here's a codepen demo for it

Answer 2

在util类中创建一个方法并调用该方法，如下所述

textFormField(
        color: Colors.white,
        hintText: "User Name",
        radius: 50,
        onSave: (String value) {
          _loginData.email = value;
        },
        validator: FormValidator().validateEmail,
    prefixIcon: Padding(
      padding: EdgeInsets.all(0.0),
      child: Icon(
        Icons.person,
        color: Colors.grey,
      ), // icon is 48px widget.
    ),suffixIcon: null,obscureText: false),

textFormField({
  Color color,
  String hintText,
  double radius,
    dynamic validator,
    Function onSave,
    dynamic prefixIcon,
    dynamic suffixIcon,
    bool obscureText,
  }) {
    return new TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
obscureText: obscureText,
decoration: InputDecoration(
  hintText: hintText,
  errorText: "",
  fillColor: color,
  filled: true,
  contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
  focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  disabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      borderSide: BorderSide(color: color, width: 0)),
  prefixIcon: prefixIcon,
  suffixIcon: suffixIcon,
),
validator: validator,
// validator: FormValidator().validateEmail,
onSaved:
    onSave, /*onSaved: (String value) {
  _loginData.email = value;
    },*/
  );
 }

Answer 3

这个例子可能有帮助：

  TextFormField(
  decoration: InputDecoration(
  errorStyle: TextStyle(
  color: Colors.white,
           )
      ),
  ),

如何在错误时更改TextFormField的背景颜色

3 个答案: