StateFulWidget permet de créer un widget qui possède un état modifiable. Un widget Flutter peut être sans état ou avec état. Un widget sans état est statique et ne change jamais alors qu’un widget avec état est dynamique.
StateFulWidget utilise l’objet State où les valeurs qui peuvent être modifiées sont stockées. En utilisant la méthode setState(), les valeurs stockées dans l’objet State peuvent être modifiées et cela permet de redessiner le widget.
En fait, un « État » n’est rien d’autre que les données qui ont été présentées ou calculées pendant la durée de vie d’un widget. Lorsque nous fermons l’application ou effectuons une opération qui rafraîchit l’écran, les données du widget peuvent être ignorées ou conservées pour une utilisation future. Ce comportement différencie un widget avec état d’un widget sans état.
Un widget avec état dépend soit de l’action de l’utilisateur, soit de la modification des données.
La classe ou l’objet State gère en fait l’état interne du widget avec état. Donc, un widget avec état dépend également de la classe State, qui n’est pas un widget.
En fait, les classes StatefulWidget et State sont séparées pour des raisons de performances.
Comment créer un StateFulWidget dans Flutter
1- Créer une classe qui hérite de StatefulWidget et renvoie l’état dans createState()pour initialiser l’état.
2- Créer une classe State pour les widgets qui peuvent changer leurs valeurs pendant l’exécution.
3- Dans la classe State, implémenter la méthode build().
4- Appeler la fonction setState(). En fait, la fonction setState()redessine les widgets.
Pour créer un widget avec état, vous devez étendre votre classe à partir de StatefulWidget et au lieu de surcharger la méthode build, vous devez surcharger la méthode createState().
En fait, la méthode createState() renvoie un objet State. Ensuite, nous créons une autre classe qui est étendue à partir de State, dans laquelle nous devons redéfinir la méthode build qui va renvoyer un ou plusieurs widgets.
En d’autre terme, l’état d’un widget est stocké dans un objet State. Lorsque l’état change, l’objet State appelle setState() pour dire au programme de redessiner le widget.
Donc, chaque fois que les données changent, le widget doit être reconstruit.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('StatefulWidget'),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Container(),
),
);
}
}En fait, nous avons une classe MyApp qui hérite de StatefulWidget et elle implémente la méthode createState(). Cette méthode renvoie l’instance de la classe MyAppState et à l’intérieur de cette classe, nous redéfinissons la méthode build.
Donc, l’avantage de surcharger la méthode build dans MyAppState est qu’elle sera appelée chaque fois qu’il y aura un changement dans les variables associées aux Widgets et l’ensemble du widget sera à nouveau redessiné. Mais pour appeler la méthode build, vous devez ajouter une autre méthode appelée setState() qui appellera la méthode de construction chaque fois qu’il y a un changement d’état.
Astuce: pour créer un StatefulWidget, vous pouvez taper stful et appuyer sur Entrée dans VS code ou Android Studio.
En fait, l’exemple précédent ne contient aucune interaction, c’est un exemple basique.
Ce que vous devez retenir est que votre application réagit selon un état spécifique, en utilisant la méthode createstate(). D’où l’utilisation d’une autre classe qui sera retournée dans createstate(), puisque c’est cette classe qui va stocker l’état de l’application en utilisant la méthode build(), qui va construire l’écran. selon un état spécifique.
Un exemple dynamique
Nous allons créer une application qui affichera « 0 » au début. Lorsque l’utilisateur appuie sur le bouton Incrémenter, le nombre affiché va augmenter de 1 et s’il appuie sur Décrémenter, il diminuera de 1.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Counter(),
));
}
class Counter extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _CounterState();
}
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _increaseCounter() {
setState(() {
_counter = _counter + 1;
});
}
void _decreaseCounter() {
setState(() {
_counter = _counter - 1;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('StatefulWidget'),
backgroundColor: Colors.lightBlueAccent,
),
body: Container(
padding: const EdgeInsets.all(15.0),
color: Colors.blueGrey[100],
child: Column(
children: [
Expanded(
child: Center(
child: Text(
'$_counter',
style: TextStyle(
fontSize: 50.0,
),
),
),
),
Row(
children: [
Expanded(
child: Center(
child: TextButton(
onPressed: _increaseCounter,
child: Text('Incrémenter'),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.teal,
onSurface: Colors.green,
textStyle: TextStyle(
color: Colors.black,
fontSize: 25.0,
),
),
),
)),
Expanded(
child: Center(
child: TextButton(
onPressed: _decreaseCounter,
child: Text('Décrémenter'),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.teal,
onSurface: Colors.grey,
textStyle: TextStyle(
color: Colors.black,
fontSize: 25.0,
),
),
),
)),
],
),
],
),
),
);
}
}Nous avons créé une classe Counter en tant que StatefulWidget. Elle implémente une méthode createState() qui va retourner l’instance de la classe _CounterState(). Cette classe va stocker l’état de notre application et elle hérite de la classe State qui contiendra des données de type Counter().
En fait, le trait de soulignement (_) est pour que cette classe soit privée car nous voulons associer un objet d’état à son widget uniquement.
Nous initialisons notre variable _counter = 0. Puis, nous créons deux méthodes _increaseCounter() et _decreaseCounter() pour incrémenter et décrémenter la variable en utilisant la fonction setState(). C’est la fonction setState()qui va actualiser l’affichage de notre écran.
Et ce qui ce trouve à l’intérieur de la méthode build() vous le connaissez déjà. Notez que nous avons appelé nos deux fonctions _increaseCounter() et _decreaseCounter()avec la propriété onPressed.
J’espère que cet article vous a aidé à mieux comprendre la notion de StatefulWidget.
0 commentaire