Junior
Quelle est la différence entre les widgets avec état et sans état?
sobes.tech IA
Réponse de l'IA
-
StatelessWidget:
- N'a pas d'état interne pouvant changer avec le temps.
- Les paramètres du widget sont définis lors de sa création et restent inchangés tout au long de son cycle de vie.
- Utilisé pour afficher des données statiques.
- La reconstruction ne se produit que lors de la reconstruction du widget parent.
- Implémenté via la méthode
build().
-
StatefulWidget:
- Possède un état interne (
State) qui peut changer en réponse à des événements (actions de l'utilisateur, requêtes réseau, etc.). - La reconstruction du widget se produit lors de l'appel de la méthode
setState(). - Utilisé pour créer des éléments interactifs et afficher des données dynamiques.
- Composé de deux parties : le
StatefulWidgetlui-même et l'objetStateassocié.
- Possède un état interne (
| Caractéristique | StatelessWidget | StatefulWidget |
|---|---|---|
| État | N'en possède pas | Possède un état mutable (State) |
| Reconstruction | Lors de la reconstruction du widget parent | Lors de l'appel à setState() |
| Utilisation | Données statiques, éléments non interactifs | Éléments interactifs, données dynamiques |
| Implémentation | Seulement la méthode build() |
createState() et méthodes du cycle de vie dans State |
// Exemple de StatelessWidget
class MyStatelessWidget extends StatelessWidget {
final String text;
MyStatelessWidget({required this.text});
@override
Widget build(BuildContext context) {
return Text(text); // Affiche simplement le texte passé
}
}
// Exemple de StatefulWidget
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0; // État interne
void _incrementCounter() {
setState(() {
// Change l'état et provoque une reconstruction
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Compteur:'),
Text('$_counter'),
ElevatedButton(
onPressed: _incrementCounter, // Appel de la méthode lors du clic
child: Text('Augmenter'),
),
],
);
}
}