Dart / FlutterDébutant 5 min·Mis à jour : 2026-09-07

StatelessWidget vs StatefulWidget en Flutter : Différences & Bonnes Pratiques

Maîtrisez l'architecture des composants Flutter et apprenez à choisir le widget adapté pour optimiser les performances de vos applications mobiles.

Publié par Projet Carthage · Mis à jour le 7 septembre 2026

Explications & Fondations Techniques

Dans Flutter, tout est Widget. L'interface est décrite de façon déclarative sous forme d'un arbre de widgets immuables.

Un `StatelessWidget` est immuable : toutes ses propriétés sont finales et son apparence ne dépend que des paramètres reçus lors de sa construction.

Un `StatefulWidget` délègue sa logique à un objet `State` persistant qui peut être reconstruit dynamiquement lorsque la méthode `setState()` est invoquée.

Exemple de Code Pratique

Pratiquer ce langage

DARTPROJET CARTHAGE

import 'package:flutter/material.dart';

// 1. StatelessWidget : UI statique
class BadgeCertification extends StatelessWidget {
  final String titre;
  const BadgeCertification({super.key, required this.titre});

  @override
  Widget build(BuildContext context) {
    return Chip(
      label: Text(titre),
      backgroundColor: Colors.cyan.shade900,
    );
  }
}

// 2. StatefulWidget : UI interactive avec état
class BoutonFavori extends StatefulWidget {
  const BoutonFavori({super.key});

  @override
  State<BoutonFavori> createState() => _BoutonFavoriState();
}

class _BoutonFavoriState extends State<BoutonFavori> {
  bool _estFavori = false;

  void _basculer() {
    setState(() {
      _estFavori = !_estFavori;
    });
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(_estFavori ? Icons.star : Icons.star_border),
      color: Colors.amber,
      onPressed: _basculer,
    );
  }
}

Pièges Fréquents & Mauvaises Pratiques

Modifier une variable dans un StatefulWidget sans appeler setState()

À Éviter (Erreur)

_estFavori = true; // L'UI ne se met pas à jour !

Recommandé (Bonne Pratique)

setState(() {
  _estFavori = true;
});

Flutter ne détecte pas les changements de variables mutables automatiquement : `setState()` signale au framework de recalculer la méthode `build()`.

Questions Fréquentes

Quand faut-il utiliser un StatelessWidget plutôt qu'un StatefulWidget ?▾

Privilégiez toujours `StatelessWidget` par défaut pour sa légèreté. N'utilisez `StatefulWidget` que pour des états d'interface locaux simples (bouton à bascule, saisie de formulaire). Pour un état global d'application, combinez avec un State Management (Provider, Riverpod).

Pratique Guidée Carthage

Maîtrisez Dart / Flutter pas à pas

Résolvez des défis interactifs directement dans votre navigateur avec retour immédiat et indices progressifs.

Démarrer le cours Dart / Flutter

Explications & Fondations Techniques

Dans Flutter, tout est Widget. L'interface est décrite de façon déclarative sous forme d'un arbre de widgets immuables.

Un `StatelessWidget` est immuable : toutes ses propriétés sont finales et son apparence ne dépend que des paramètres reçus lors de sa construction.

Un `StatefulWidget` délègue sa logique à un objet `State` persistant qui peut être reconstruit dynamiquement lorsque la méthode `setState()` est invoquée.

import 'package:flutter/material.dart'; // 1. StatelessWidget : UI statique class BadgeCertification extends StatelessWidget { final String titre; const BadgeCertification({super.key, required this.titre}); @override Widget build(BuildContext context) { return Chip( label: Text(titre), backgroundColor: Colors.cyan.shade900, ); } } // 2. StatefulWidget : UI interactive avec état class BoutonFavori extends StatefulWidget { const BoutonFavori({super.key}); @override State<BoutonFavori> createState() => _BoutonFavoriState(); } class _BoutonFavoriState extends State<BoutonFavori> { bool _estFavori = false; void _basculer() { setState(() { _estFavori = !_estFavori; }); } @override Widget build(BuildContext context) { return IconButton( icon: Icon(_estFavori ? Icons.star : Icons.star_border), color: Colors.amber, onPressed: _basculer, ); } }

Pièges Fréquents & Mauvaises Pratiques

Modifier une variable dans un StatefulWidget sans appeler setState()

À Éviter (Erreur)

_estFavori = true; // L'UI ne se met pas à jour !

Recommandé (Bonne Pratique)

setState(() {
  _estFavori = true;
});

Flutter ne détecte pas les changements de variables mutables automatiquement : `setState()` signale au framework de recalculer la méthode `build()`.

Questions Fréquentes

Quand faut-il utiliser un StatelessWidget plutôt qu'un StatefulWidget ?▾