Le widget TextFormField dans Flutter
Le widget TextFormField dans Flutter
-
Objectif
- Cet article explique comment utiliser le widget TextFormField dans Flutter en flutter.
-
Présentation
- Le widget
TextFormField
est un widget dans Flutter utilisé pour collecter les entrées utilisateur dans les formulaires. - Il s’agit d’un widget de saisie de texte qui s’intègre au widget Formulaire. Il permet à l’utilisateur d’entrer du texte et fournit une validation pour les données saisies.
- Il peut également inclure des fonctionnalités supplémentaires telles que la décoration, les formateurs d’entrée et les rappels pour gérer les modifications apportées à la valeur d’entrée.
- Le widget
TextFormField
est utilisé pour recevoir les entrées de l’utilisateur dans flutter . Il s’agit d’un widget d’entrée utilisateur simple et facile dans Flutter . - Vous pouvez personnaliser le TextFormField en utilisant les propriétés de décoration, de validation et d’autres. Assurez-vous d’utiliser le widget Form dans le même widget parent pour gérer la validation du formulaire.
-
Comment créer
TextFormField
dans Flutter - Pour créer un TextFormField dans Flutter, vous pouvez utiliser le widget TextFormField fourni par la bibliothèque Flutter. Vous pouvez le faire en ajoutant le code suivant dans votre fichier Dart :
- Dans ce code, nous avons défini un TextFormField avec une décoration d’InputDecoration qui comprend un labelText, un hintText et une bordure. Nous avons également défini un validateur pour vérifier si la valeur entrée est vide et une méthode onSaved pour enregistrer la valeur entrée.
-
Comment utiliser un
TextFormField
dans un formulaire Flutter - Pour utiliser un TextFormField dans un formulaire Flutter, vous pouvez suivre les étapes suivantes:
- 1-Commencer par l’importation des packages nécessaires :
import 'package:flutter/material.dart';
- 2-Définissez un état global pour stocker la valeur du champ de formulaire :
final _formKey = GlobalKey
(); String _email; - 3-Dans la méthode build, ajoutez un widget Form enveloppant les champs TextFormField :
@override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ TextFormField( validator: (value) { if (value.isEmpty) { return 'Entrez un email valide'; } return null; }, onSaved: (value) => _email = value, decoration: InputDecoration(labelText: 'Email'), ), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Données en cours'))); } }, child: const Text('Submit'), ), ], ), ); }
-
Comment gérer la saisie de l’utilisateur dans un TextFormField
- Il existe plusieurs méthodes pour gérer la saisie de l’utilisateur dans un TextFormField dans Flutter. Voici les étapes à suivre pour y parvenir :
- 1-Créez un objet controller pour le TextFormField en utilisant le contrôleur TextEditingController. Créez un objet TextEditingController comme ci-dessous et affectez-le à la propriété controller de TextFormField. Son objet contiendra les données d’entrée.
TextEditingController userInput = TextEditingController() ;
- 2-Définissez la propriété de contrôleur pour le TextFormField en utilisant le contrôleur défini.
- Pour définir la propriété de contrôleur pour le TextFormField en utilisant un contrôleur prédéfini, vous pouvez utiliser le constructeur TextFormField et passer le contrôleur en tant que paramètre paramètre
TextFormField( controller: myController, decoration: InputDecoration(labelText: 'Enter text'), );
- Où « myController » est le nom de votre contrôleur prédéfini.
- 3-Écoutez les modifications du texte en utilisant la méthode de contrôleur.addListener.
- 4-Validez la saisie de l’utilisateur en utilisant la méthode de contrôleur.validate.
- 5-Enfin, obtenez la valeur saisie en utilisant la méthode de contrôleur.text.
-
Méthode
onChange()
dans TextFormField - La propriété onChanged de TexteTextFormField dans Flutter est une fonction de rappel qui est appelée chaque fois que le texte dans le champ de formulaire change. La fonction prend en argument la nouvelle valeur du texte et vous pouvez utiliser cette valeur pour mettre à jour l’état de votre application.
- Pour obtenir des données d’entrée utilisateur à changement instantané dans le TextFormField , la méthode
onChange()
est utilisée. Vous utilisez setState() à l’intérieur comme ci-dessous. -
Exemples
- Voici quelques exemples d’utilisation de l’onChanged propriété dans un TextFormField dans Flutter :
- Mise à jour d’une variable locale :
- Validation de l’entrée au fur et à mesure que l’utilisateur tape:
- Filtrage des entrées :
- Mise à jour de plusieurs champs :
- Recherche dans une liste d’éléments à mesure que l’utilisateur tape :
-
Applications
- Travail demandé
- Réaliser une application Flutter avec un formulaire contenant deux 'TextFormField' comme le montre l'image suivant:
TextFormField(
decoration: InputDecoration(
labelText: 'Nom',
hintText: 'Entrez votre nom',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
validator: (value) {
if (value.isEmpty) {
return 'S\'il vous plaît entrez votre nom';
}
return null;
},
onSaved: (value) {
_nom = value;
},
),
onChanged: (value) {
setState(() {
String name = value;
});
},
String _text = "";
TextFormField(
onChanged: (value) {
setState(() {
_text = value;
});
},
)
TextFormField(
onChanged: (value) {
if (value.length > 10) {
setState(() {
_error = "Value is too long";
});
} else {
setState(() {
_error = null;
});
}
},
)
TextFormField(
onChanged: (value) {
if (value.length < 3) {
setState(() {
_errorText = "Input must be at least 3 characters";
});
} else {
setState(() {
_errorText = "";
});
}
},
)
TextFormField(
onChanged: (value) {
setState(() {
_text = value.toUpperCase();
});
},
)
String _field1 = "";
String _field2 = "";
TextFormField(
onChanged: (value) {
setState(() {
_field1 = value;
_field2 = value;
});
},
)
List _items = ['apple', 'banana', 'cherry'];
List _filteredItems = [];
TextFormField(
onChanged: (value) {
setState(() {
_filteredItems = _items.where((item) => item.startsWith(value)).toList();
});
},
)
Solution
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
TextFormField(
style: const TextStyle(color: Colors.blue),
cursorColor: Colors.blue,
decoration:
buildInputDecoration(Icons.person, "Utilisateur"),
),
const SizedBox(
height: 10.0,
),
TextFormField(
style: const TextStyle(color: Colors.blue),
cursorColor: Colors.blue,
decoration: buildInputDecoration(Icons.email, "Email"),
),
],
))),
));
}
}
// TextFormField Border Decoration
InputDecoration buildInputDecoration(IconData icons, String hinttext) {
return InputDecoration(
hintText: hinttext,
prefixIcon: Icon(icons, color: Colors.blue),
border: InputBorder.none,
filled: true,
fillColor: Colors.blue.withOpacity(.08),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0), topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue.withOpacity(.05)),
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0), topLeft: Radius.circular(0)),
),
);
}