Flutter Textformfield 应该响应输入和错误

Question

我经常看到用户输入时字段响应的地方，提供实时反馈。一个例子是当我输入确认密码或电子邮件时，如果确认密码或电子邮件在输入时与密码不匹配 returns 错误，通过标记将字段的边框变为红色直到它与正确的输入匹配。我已经编写了这段代码，我该如何改进代码以响应描述。

  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, 在文本表单域中传递它。

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'),
                      ),
                    ),
                  ],
                ),
              ),

Flutter Textformfield 应该响应输入和错误

Flutter Textformfield should be responsive to typing and error

flutter

flutter-layout

flutter-textformfield

flutter-borderdecoration