Comment créer un formulaire de connexion en flutter

yuyh`]d

[sommaire]

Dans cet article, nous apprendrons à concevoir un formulaire de connexion dans Flutter. Cet article ne montre que l’interface utilisateur.

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.

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 :

1- MyApp

La class MyApp contient 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.

2- MyHomePage

La classe MyHomePage est le widget contenant la page d’accueil de l’application.

3- _MyHomePageState

La classe _MyHomePageState est l’état du widget MyHomePage. C’est donc ici que la méthode build est implémentée.

Comment créer un formulaire de connexion en flutter

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 _MyHomePageState et plus précisément dans la méthode build.

Flutter