web-dev-qa-db-fra.com

Validation du champ de texte dans Flutter

Je travaille sur le widget Flutter TextField. Je souhaite afficher un message d'erreur sous le widget TextField si l'utilisateur ne remplit pas cette variable TextField. Je dois seulement utiliser TextField Widget pas TextFormField dans ce cas.

dartflutter
16
shalini

Un exemple minimal de ce que vous voulez:

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  final _text = TextEditingController();
  bool _validate = false;

  @override
  void dispose() {
    _text.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Error Showed if Field is Empty on Submit button Pressed'),
            TextField(
              controller: _text,
              decoration: InputDecoration(
                labelText: 'Enter the Value',
                errorText: _validate ? 'Value Can\'t Be Empty' : null,
              ),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _text.text.isEmpty ? _validate = true : _validate = false;
                });
              },
              child: Text('Submit'),
              textColor: Colors.white,
              color: Colors.blueAccent,
            )
          ],
        ),
      ),
    );
  }
}
30
anmol.majhail

Ajout à la réponse @anmol. TextFormField est également une meilleure option pour la validation.

Flutter gère le texte d'erreur lui-même, nous n'avons donc pas besoin d'utiliser la variable _ validate . Au moment de l'exécution, il vérifiera si vous avez satisfait à la condition ou non.

final confirmPassword = TextFormField(
      controller: widget.confirmPasswordController,
      obscureText: true,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.lock_open, color: Colors.grey),
        hintText: 'Confirm Password',
        errorText: validatePassword(widget.confirmPasswordController.text),
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      ),
    );

 String validatePassword(String value) {
      if (!(value.length > 5) && value.isNotEmpty) {
        return "Password should contains more then 5 character";
      }
      return null;
    }

Remarque: l'utilisateur doit ajouter au moins un caractère pour obtenir ce message d'erreur.

3
jitsm555