Objectifs
- Dans cet article, nous apprendrons à concevoir un formulaire de connexion dans Flutter. Cet article ne montre que l'interface utilisateur.
Problème
- L'écran de connexion que nous allons construire ici est simple dans ses aspects visuels. Il y a d'abord un widget pour le nom de l'utilisateur.
- Ensuite, à propos de l'écran lui-même, Connexion. Maintenant, nous avons deux champs de texte, nom d'utilisateur et mot de passe, pour obtenir les identifiants de connexion/connexion de l'utilisateur.
Réalisation
Créer un nouveau projet
- Avec VS Code, la création d'un nouveau projet se fait à l'aide de l'option Flutter: New Project accessible dans la palette de commandes (Ctrl+Shift+P).
- Ouvrons donc la palette de commande et tapons "flutter", la commande Flutter: New Project apparait, cliquons dessus pour appeler la commande.
- Il nous est ensuite demandé de choisir un nom de projet "Connexion_Form" et le dossier dans lequel le placer.
- L'application se crée puis le fichier main.dart s'ouvre avec le contenu suivant:
- Le fichier main.dart créé automatiquement lors de l'étape précédente est composé de 3 classes :
- La class
MyAppcontient la définition de l'application. Ce widget stateless est le widget à la racine de l'application et, comme tout widget stateless, il contient la méthode build pour dessiner l'interface utilisateur représentant le widget. - La classe
MyHomePageest le widget contenant la page d'accueil de l'application. - La classe
_MyHomePageStateest l'état du widget MyHomePage. C'est donc ici que la méthode build est implémentée.
1- MyApp
- La class
Modifier la page main.dart
- Maintenant que nous avons vu en détail la construction de la page, modifions-la pour obtenir un formulaire de connexion comme demandé ci-dessus :
- Nos modifications vont donc se porter sur la classe
_MyHomePageStateet plus précisément dans la méthode build.
De quel widgets avons-nous besoin pour écrire ce formulaire ?
- Cherchons les widgets qui nous seront utiles.
Formpour définir le formulaireTextFormFieldpour les entrées texteRaisedButtonpour valider le formulaire
- Cherchons les widgets qui nous seront utiles.