Кнопка включения / выключения флаттера на основе содержимого TextFormField

Question

Как я могу активировать / деактивировать кнопку на основе содержимого TextFormField?

Я хочу убедиться, что пользователь может нажимать кнопку X, только если TextFormField имеет 10 введенных номеров (если это номер мобильного телефона).

Спасибо!

Answer 1

Принятый ответ, кажется, не работает с использованием последней версии Flutter v1.7.8 (стабильной), он выдает мне следующую ошибку:

Этот виджет TestForm нельзя пометить как необходимый для сборки, поскольку среда уже находится впроцесс создания виджетов

Рабочая версия выглядит следующим образом:

...
autovalidate: true,
validator: (String txt){
      bool isValid = txt.length == 10;
      if (isValid != _btnEnabled) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          setState(() {
            _btnEnabled = txt.length == 10;
          });
        });
      } 
}

...

Answer 2

Простой способ - установить для свойства autovalidate нашего TextFormField значение true.Это автоматически обнаружит изменения в нашем виджете TextFormField.Затем мы можем попытаться проверить, имеет ли значение нашего TextFormField длину строки 10 символов в свойстве validator.После этого мы можем вызвать setState, чтобы включить или отключить нашу кнопку (в этом примере я использую FlatButton).

bool _btnEnabled = false;

...

@override
Widget build(BuildContext context){

  ...

  TextFormField(

    ...
    autovalidate: true,
    validator: (String txt){
      if (txt.length == 10){
        setState((){
          _btnEnabled = true;
        });
      } else {
        setState((){
          _btnEnabled = false;
        });
      }
    }

    ...

  FlatButton(
    onPressed: _btnEnabled == true ? yourCallback : null,
    child: ...