StatefulWidget et StatelessWidget dans Flutter

Les widgets sans état sont des widgets qui ne stockent aucun état. Autrement dit, ils ne stockent pas les valeurs susceptibles de changer.

• Nous créons un widget sans état en étendant notre classe à partir de StatelessWidgetet une implémentation minimale doit ressembler à
• 1- Créez une classe qui étend ‘StatelessWidget‘.
• 2- Créez une méthode ‘build()‘ pour les widgets qui ne changent jamais leurs valeurs pendant l’exécution.
• 3- La méthode ‘build()‘ renvoie le widget. C’est l’endroit où vous construisez votre widget (et potentiellement n’importe quel sous-arbre de Widgets).

Le StatelessWidget est une classe (un widget) qui sert à créer une interface utilisateur. Comme son nom l’indique, elle n’a pas vocation à voir son état évoluer dans le temps.

Une classe qui implémente StatelessWidget doit impérativement intégrer un widget build :

La première, classique, étend StatefulWidget.

• Elle a un rôle plutôt déclaratif. C’est donc une classe qui va contenir un constructeur et des attributs par exemple.
• Elle contient aussi, et c’est obligatoire, l’appel à la méthode createState.
La méthode createState peut être optimisée et il est préférable de la retrouver sous cette syntaxe :
_AccueilState createState() => _AccueilState(); à la place de:
State<StatefulWidget> createState(){
return _HomepageState();
}
• Cette dernière va retourner une instance d’une classe gérant le State par l’appel à son constructeur.
• Elle prendra en charge deux choses.
• Premièrement, elle décrira des widgets, principalement des éléments graphiques.
• Deuxièmement, elle sera capable de les faire changer et évoluer par le recours à une méthode setState.

La deuxième, est une classe qui doit étendre State. T correspondant à la classe associée étendant le StatefulWidget.

Le deuxième type de widget est appelé un widget avec état. Cela signifie qu’il peut suivre les modifications et mettre à jour l’interface utilisateur en fonction de ces modifications.

1- Créez une classe qui étend ‘StatefulWidget‘, qui renvoie l’état dans ‘createState()‘

2- Créez une classe ‘State‘ pour les widgets qui peuvent changer leurs valeurs pendant l’exécution.

3- Dans la classe ‘State‘, implémentez la méthode ‘build()‘.

4- Appelez la fonction ‘setState()‘. La fonction ‘setState()‘ redessine en fait les widgets.

Flutter a fourni un raccourci pour créer une classe étendant les classes StatefulWidget et State sous laquelle vous pouvez déclarer vos widgets avec état. Tapez simplement stful et appuyez sur entrée. Cette classe contient l’état du widget et la méthode build().

• 1- Créez une nouvelle application Flutter application_flutter
• 2- Créez un nouveau fichier page/homepage.dart dans le répertoire lib . (Créez également le répertoire de la page s’il n’existe pas encore.)

• Le widget défini via le home dans votre application matérielle est la page que l’utilisateur voit lorsqu’il démarre l’application. Généralement, il doit contenir tous les éléments de navigation nécessaires pour permettre à l’utilisateur de naviguer vers d’autres écrans.

• 3- Créez la classe suivante dans ce nouveau fichier.



• 4- Revenez au fichier main.dart et modifiez-le comme suit.



• 5- Démarrez l’application (si elle n’est pas déjà lancée). Il doit afficher le texte « Bienvenue sur la page d’accueil » et avoir une barre d’application bleue en haut affichant « Formation Flutter » . Sur la droite, il devrait y avoir une icône Paramètres.
• 6- Modifiez l’emplacement du texte « Bienvenue sur la page d’accueil » pour qu’il occupe le centre de l’écran, avec une couleur « blueAccent » et une police « 30« .
Solution



• 7- Changez le widget « Text » par un widget Icon avec les propriétés Icons.favorite_border, color: Colors.pink et size: 200.
Solution



• 8- supprimez Debugbanner en haut à droite de l’écran.
Solution

1- Créez une nouvelle application Flutter application02_flutter

2- Créer un dossier vide et nommer src.

3- Créer un fichier App.dart.

4- Dans se fichier créer une classe App qui ‘étend’ StatelessWidget, puis utiliser la méthode build pour renvoyer le Widget créé.

5- Le widget appBar doit contenir cinq icone et un texte comme le montre l’image ci-contre

6- Créer dans le fichier main.dart une fonction pour appeler la classe créée dans le deuxième fichier.

• L’image suivant représente le résultat obtenu

• 1- Créez une nouvelle application Flutter application03_flutter
• 2- Utilisez les deux widgets Statefull et stateless pour réaliser la tâche décrite par l’image suivant: