Flutter dans le développement mobile : qu'est-ce que c'est, concepts clés et fonctionnement

Flutter : bases de Widget, StatelessWidget et StatefulWidget

Widget — une description déclarative d'une partie de l'interface utilisateur. Tout dans Flutter est un Widget : d'un bouton à l'application elle-même. Un Widget est une configuration (pas l'interface elle-même). StatelessWidget — un Widget immuable. build() est appelée une fois. N'a pas d'état. Utilisé pour le contenu statique. StatefulWidget — un Widget muable. Possède un objet State qui peut changer. setState() — déclenche la reconstruction. State — un objet muable lié à un StatefulWidget. Contient des données qui peuvent changer.

StatelessWidget vs StatefulWidget

StatelessWidget — build() est appelée une fois. Adapté pour les en-têtes, icônes, textes statiques. StatefulWidget — build() est appelée à chaque fois que setState() est invoqué. Adapté pour les formulaires, listes avec modifications, minuteries. InheritedWidget — transmission de données vers le bas sans passage explicite par les constructeurs. Theme, MediaQuery, Navigator — InheritedWidgets. BuildContext — position d'un Widget dans l'arbre. context.of<T>, context.watch<T>, context.select<T,R> — accès à InheritedWidget.

// Exemple Flutter Widget: StatefulWidget avec setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — configuration. StatelessWidget — immuable. StatefulWidget — muable avec setState(). IT Sectr recommande de commencer par StatelessWidget et de passer à StatefulWidget uniquement lorsque vous avez besoin d'état.

Arbres (Widget Tree, Element Tree, RenderObject Tree)

Flutter utilise trois arbres pour un rendu efficace. Widget Tree — arbre de configuration. Les Widgets sont créés fréquemment (chaque build), légers. Element Tree — arbre d'éléments. Un élément par Widget (si le type ne change pas). Element — pont entre Widget et RenderObject. RenderObject Tree — arbre de rendu. Gère les tailles, positions, dessin. RenderObject — lourd, créé rarement. Flutter compare le Widget Tree et met à jour l'Element Tree, ce qui déclenche la mise à jour du RenderObject Tree.

Keys et Element Tree

Key — identifiant de Widget dans l'Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Les Keys permettent à Flutter de faire correspondre les Widgets anciens et nouveaux lors de la reconstruction. Sans Keys, Flutter fait correspondre par type et position de Widget. GlobalKey — accès à State depuis un autre Widget. Utilisé pour : formulaires complexes, animations, accès à State dans les tests. IT Sectr recommande d'utiliser des Keys pour les listes (List.generate) et d'éviter GlobalKey sauf si nécessaire.

Expanded — Widget qui remplit l'espace disponible dans Row/Column/Flex. Flexible — ne force pas le remplissage (peut être plus petit). MediaQuery — InheritedWidget avec informations sur l'appareil : taille d'écran, orientation, plateforme, facteur d'échelle de texte. Theme/ThemeData — thème centralisé. Theme.of(context) — accès. MaterialApp — Widget racine pour la configuration du routage, des thèmes, des locales. Scaffold — mise en page de base avec AppBar, Drawer, BottomNavigationBar. AppBar — panneau supérieur.

Navigation (Navigator, Route)

Navigator — pile de routes (Routes). Navigator.push — ouvrir un écran (retourne Future). Navigator.pop — fermer (avec résultat). MaterialPageRoute — transition animée (glissement depuis la droite). Named Routes — identifiants de chaîne. onGenerateRoute — gestionnaire centralisé. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — navigation déclarative pour le web, le deep linking et les scénarios complexes.

Navigator 2.0

Navigator 2.0 — navigation déclarative. Router — Widget central. RouteInformationParser — analyse d'URL. RouterDelegate — gestion de la pile. GoRouter (paquet) — wrapper simplifié autour de Navigator 2.0. Prend en charge : routes nommées, paramètres, redirection, deep linking. IT Sectr recommande GoRouter pour la plupart des projets et Navigator 2.0 uniquement pour les scénarios complexes (web, desktop).

Async (FutureBuilder, StreamBuilder)

FutureBuilder — Widget qui construit l'interface utilisateur basée sur un Future. connectionState : none, waiting, active, done. Utilisé pour : requêtes HTTP, lectures de BD, minuteries. StreamBuilder — Widget pour Stream (flux de données infini). snapshot.data, snapshot.hasError, snapshot.hasData. Utilisé pour : WebSocket, Firebase, mises à jour de localisation. Les deux Widgets se reconstruisent lors de la réception de nouvelles données.

Gestion d'état

Provider — DI simple + gestion d'état. ChangeNotifierProvider, MultiProvider. Riverpod — remplacement moderne de Provider : sûr à la compilation, indépendant de BuildContext. Bloc — architecture Event-Driven : Cubit (événements simples) vs Bloc (complexes). GetX — gestion d'état légère + DI + routage. setState — le plus simple, pour l'état local. IT Sectr recommande Riverpod pour les nouveaux projets et Provider pour les projets existants.

Thèmes et adaptation (MediaQuery, ThemeData)

MediaQuery — taille d'écran, orientation, plateforme, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — thème de l'application : couleurs, polices, formes. Theme.of(context).textTheme.bodyLarge. Hot Reload — injection de code dans une application en cours d'exécution. Préserve l'état. Ne prend pas en charge : modification de main(), variables globales, champs statiques. Hot Restart — redémarrage complet de l'application (perte d'état). Hot Reload — principal avantage de Flutter pour les développeurs.

StatelessWidget — pour contenu statique. StatefulWidget — pour contenu dynamique. InheritedWidget — pour DI. IT Sectr recommande StatelessWidget par défaut et StatefulWidget uniquement si nécessaire.

Mise en page responsive

LayoutBuilder — adaptation aux dimensions du parent. OrientationBuilder — adaptation à l'orientation. Expanded vs Flexible — distribution de l'espace dans Row/Column. MediaQuery — points de rupture pour tablettes et ordinateurs de bureau. SafeArea — marges des éléments système (encoche, barre d'état). AspectRatio — maintien des proportions. IT Sectr recommande LayoutBuilder pour les mises en page adaptatives et OrientationBuilder pour l'orientation paysage.

Tests (Widget, Integration, Unit)

Tests unitaires — test de la logique métier, des référentiels, des modèles. dart test — exécution. Tests de Widget — test de widgets isolément. WidgetTester — pumpWidget, tap, enterText. Tests d'intégration — scénarios complets sur un appareil/émulateur réel. Mockito — simulation de dépendances. Golden tests — comparaison de captures d'écran (fichiers golden). IT Sectr recommande des tests de Widget pour chaque écran et des tests unitaires pour la logique métier.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animations (Implicites, Explicites, Hero)

Animations implicites — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Les changements de propriété s'animent automatiquement. Animations explicites — AnimationController avec Tween. forward() / reverse(). Animation Hero — Widget Hero avec une balise — animation de transition entre écrans. Animation échelonnée — chaîne d'animations avec Interval. Lottie — intégration d'animations After Effects. Rive — animations interactives (state machine). IT Sectr recommande AnimatedContainer pour 80% des cas et AnimationController pour les scénarios complexes.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Réseau (http, dio, graphql)

http — client HTTP simple (get, post, put, delete). dio — client avancé avec intercepteurs, timeouts, tentatives, journalisation. graphql_flutter — client GraphQL pour Flutter. json_serializable — génération de fromJson/toJson via annotations. Retrofit Dart — client HTTP type-safe comme Retrofit. WebSocket — via web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr recommande dio pour l'API REST et graphql_flutter pour GraphQL.

Flutter DevTools — ensemble d'outils : Inspector (arbre de widgets), Timeline (performances), Memory, Network, Logging. Profile mode — profilage sans débogage. Performance overlay — FPS, temps de construction. Flame chart — traçage de graphique enflammé. DevTools — outil essentiel pour optimiser les applications Flutter en production.

Flutter Web — compilation de Flutter en WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-parfait, mais plus lourd. HTML renderer — léger, mais avec des limitations. WASM (Flutter 3.22+) — performances natives. Adaptation responsive via LayoutBuilder et MediaQuery. IT Sectr recommande CanvasKit pour les applications web de bureau et HTML renderer pour les sites de contenu.