Поле Flutter Textform должно реагировать на ввод текста и ошибки

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 ) )
        ),
      ),
      ),
    ],
    );
  }

Здесь я установил hintText

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