Sobes.tech
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 StatefulWidget lui-même et l'objet State associé.
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'),
        ),
      ],
    );
  }
}