Flutter Textformfield 应该对输入和错误做出响应

Question

我经常看到当用户输入时字段在哪里响应，并提供实时反馈。一个例子是，当我输入确认密码或电子邮件时，如果确认密码或电子邮件在输入时与密码不匹配，则会通过将字段的边框标记为红色直到匹配正确的输入来返回错误。我已经编写了这段代码，我该如何改进代码以使其具有响应性。

  Widget _buildConfirmPasswordTF() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
      // Text('Password', style: kLabelStyle,),
      SizedBox(height: 10.0),
      Container(alignment: Alignment.centerLeft, decoration: kBoxDecorationStyle, height: 60.0, child: TextFormField(
        validator: ( confirmPassword ){
          if ( confirmPassword.trim() != _password.isValidPassword ) {
            return null;
          }  else {
            return 'Password doesn\'t match';
            }
        },
        obscureText: true, style: TextStyle(color: Colors.white, fontFamily: 'OpenSans',),
        decoration: InputDecoration(border: InputBorder.none, contentPadding: EdgeInsets.only(top: 14.0),
          prefixIcon: Icon(Icons.lock, color: Colors.white,),
          hintText: 'Enter Confirm Password',
          hintStyle: kHintTextStyle,
          errorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red ) ),
          focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red ) )
        ),
      ),
      ),
    ],
    );
  }

这是我设置提示文本的地方

final kHintTextStyle = TextStyle(
  color: Colors.white54,
  fontFamily: 'OpenSans',
);

这是我设置 labelStyle 的地方

final kLabelStyle = TextStyle(
  color: Colors.white,
  fontWeight: FontWeight.bold,
  fontFamily: 'OpenSans',
);

这是我设置边框装饰的地方

final kBoxDecorationStyle = BoxDecoration(
  color: Color(0xFF6CA8F1),
  borderRadius: BorderRadius.circular(10.0),
  boxShadow: [
    BoxShadow(
      color: Colors.black12,
      blurRadius: 6.0,
      offset: Offset(0, 2),
    ),
  ],
);

Answer 1

你需要 autovalidateMode: AutovalidateMode.onUserInteraction, 在 textformfield 中传递这个。

Answer 2

您可以使用Form() 来执行此操作，为它提供key 和autoValidateMode 以确保字段具有值或该值是您所不具备的，您可以添加另一个字段来确认密码或电子邮件并将onChanged 中字段的值与其他电子邮件字段的值进行比较，以确保它们匹配。

  import 'package:email_validator/email_validator.dart';

  final formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool isValid = false;

_emailController.addListener(
  () {
    //With this, you can "listen" all the changes on your text while
    //you are typing on input
    //use setState to rebuild the widget

    if (EmailValidator.validate(_emailController.text)) {
      setState(() {
        isValid = true;
      });
    } else {
      setState(() {
        isValid = false;
      });
    }
  },
);

              Form(
                key: formKey,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(
                          horizontal: size.width * 0.105),
                      child: TextFormField(
                        validator: (value) =>
                            !EmailValidator.validate(value)
                                ? 'Enter a valid email'
                                : null,
                        keyboardType: TextInputType.emailAddress,
                        textAlign: TextAlign.center,
                        controller: _emailController,
                        decoration: kInputDecoration.copyWith(
                            hintText: 'Enter your email'),
                      ),
                    ),
                    SizedBox(
                      height: 18,
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(
                          horizontal: size.width * 0.105),
                      child: TextFormField(
                        obscureText: true,
                        validator: (value) =>
                            value.isEmpty ? 'Enter your password' : null,
                        keyboardType: TextInputType.text,
                        textAlign: TextAlign.center,
                        controller: _passwordController,
                        decoration: kInputDecoration.copyWith(
                            hintText: 'Enter your password'),
                      ),
                    ),
                  ],
                ),
              ),