Impossible de valider l'entrée à l'aide de TextFormField et FlatButton

2020-08-01 android-studio flutter dart flutter-layout

Je travaille actuellement sur une application de flutter. J'essaie d'obtenir l'entrée de l'utilisateur à l'aide de TextFormField et de la passer à la page suivante en utilisant le navigateur à l'intérieur de FlatButton. Mais pour une raison quelconque, cela ne fonctionne pas comme je m'y attendais.

Voici le code:

TextFormField(
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide: BorderSide(color: Colors.grey[200])),
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide: BorderSide(color: Colors.grey[300])),
                  filled: true,
                  fillColor: Colors.grey[100],
                  errorBorder: InputBorder.none,
                  focusedErrorBorder: InputBorder.none,
                  errorStyle: Theme.of(context).textTheme.caption,
                  hintText: 'Phone Number',
                ),
                keyboardType: TextInputType.phone,
                controller: _phoneController,
                maxLength: 10,
                validator: (value) {
                  print(value);
                  return isPhoneValid(value)
                      ? 'Continue'
                      : "Input : 98XXXXXXXX";
                },
              ),
              FlatButton(
                child: Text('Enter'),
                textColor: Colors.white,
                disabledColor: Colors.grey,
                padding: EdgeInsets.all(16),
                onPressed: (isPhoneValid(_phoneController.text))
                    ? () {
                        Navigator.push(context, MaterialPageRoute(builder,(context)=>HomeScreen));
                      }
                    : null,
                color: Colors.blue,
              ),

et ceux-ci sont en dehors de la fonction de construction.

final _phoneController = TextEditingController();

  bool isPhoneValid(String value) {
    print('Function');
    print(value);
    return value.trim().length == 10;
  }

Pour une raison quelconque, onPressed dans FlatButton est toujours mappé sur null. Veuillez me guider à cet égard.

Merci d'avance.

PS: Le validateur à l'intérieur de TextFormField ne semble pas non plus fonctionner.

Answers

La raison pour laquelle vous construisez onPressed de cette manière n'est pas claire, cela ne fonctionnera pas comme vous le souhaitez. Changez votre méthode onPressed en ceci

onPressed: () {
    if (isPhoneValid(_phoneController.text)) {
        Navigator.push(context, MaterialPageRoute(builder,(context)=>HomeScreen));
    }
} 

ÉDITER

Pour désactiver le bouton jusqu'à ce que le champ de texte soit valide, vous devez écouter les modifications de texte

bool _canPressButton = false;

@override
void initState() {
  _phoneController.addListener(_checkIfCanPressButton);

  super.initState();
}

void _checkIfCanPressButton() {
  var canPressButton = isPhoneValid(_phoneController.text);
  if (canPressButton != _canPressButton) {
    setState(() => _canPressButton = canPressButton);
  }
}

Alors tu pourrais faire

onPressed: _canPressButton ?
    ? () => Navigator.push(context, MaterialPageRoute(builder: (context) => HomeScreen))
    : null,

Related