Flutter — concepts clés, architecture et widgets

Qu’est-ce que Flutter

Flutter est un SDK (kit de développement logiciel) et framework pour créer des interfaces utilisateur, annoncé par Google en 2015. La première version stable Flutter 1.0 est sortie en décembre 2018. Contrairement à React Native, Flutter n’utilise pas de pont entre JavaScript et le code natif — il compile directement en instructions natives du processeur.

La caractéristique clé de Flutter est son propre moteur de rendu. Le framework ne dépend ni d’UIKit (iOS) ni du système View d’Android. Au lieu de cela, Flutter dessine chaque pixel de manière indépendante via Skia (avant 2024) ou le nouveau moteur Impeller. Cela garantit une apparence cohérente sur toutes les plateformes et élimine les problèmes d’adaptation entre différentes versions d’OS.

Selon Statista 2024, Flutter se classe premier parmi les frameworks multiplateformes en popularité : environ 46 % des développeurs l’utilisent pour le développement mobile. Le framework est utilisé dans les projets de Google Pay, Alibaba, eBay, BMW et Tencent.

Histoire et versions de Flutter

La première version alpha de Flutter a été présentée au Dart Developer Summit en 2015 sous le nom Sky. En 2018, Flutter 1.0 est sorti avec le soutien uniquement pour iOS et Android. Flutter 2.0 (2021) a ajouté le support Web et Desktop. Flutter 3.0 (2022) a introduit le support stable pour macOS et Linux. Flutter 3.16 (2023) a présenté Impeller — un nouveau moteur de rendu basé sur Metal et Vulkan.

Flutter 3.22 (2024) inclut Impeller par défaut sur iOS, un support amélioré de Material Design 3, Dart 3.4 avec des extensions de macros et un support intégré de Native Assets pour un accès direct aux ressources de la plateforme. Google rapporte qu’Impeller réduit les saccades d’images de 90 % par rapport à Skia.

Le langage Dart

Dart est un langage de programmation créé par Google en 2011 et utilisé dans Flutter. Dart combine un typage strict avec des capacités de compilation JIT (pour Hot Reload) et de compilation AOT (pour les builds de production). Dart 3.0 (2023) a introduit le pattern matching, les classes scellées et les records comme fonctionnalités stables.

Null safety dans Dart est une fonctionnalité obligatoire introduite depuis la version 2.12. Le compilateur vérifie tous les types nullables au moment de la compilation, éliminant NullPointerException au moment de l’exécution. Les types de données (int, String, bool) sont non nullables par défaut, et les valeurs nullables utilisent le suffixe ? (par exemple, String? name).

Architecture de Flutter

L’architecture de Flutter est construite sur un principe à trois couches. La couche inférieure est le moteur (C/C++), responsable du rendu, des E/S et de l’accès aux API de la plateforme. La couche intermédiaire est le framework (Dart), qui implémente le système de widgets, les gestes, les animations et la navigation. La couche supérieure est l’application (Dart), qui assemble les widgets en un arbre.

Widgets et arbre de widgets

Dans Flutter, tout est un widget. Les widgets sont de deux types : StatelessWidget (immuable, ne stocke pas d’état) et StatefulWidget (muable, gère l’état via State). L’arbre de widgets (Widget Tree) est une structure hiérarchique où chaque widget enfant est imbriqué dans un parent. Scaffold, AppBar, Container, Text, Column, Row — ce sont les blocs de construction de base.

BuildContext est un objet qui communique la position du widget dans l’arbre. MediaQuery.of(context) obtient les dimensions de l’écran, Theme.of(context) obtient le thème actuel. BuildContext est utilisé pour la navigation (Navigator.of(context)), l’accès à InheritedWidget et la traduction de locale via Localizations.of.

Le moteur Impeller

Impeller est le moteur de rendu moderne de Flutter, écrit en C++ et utilisant Metal (iOS/macOS) et Vulkan (Android). Contrairement à Skia, qui redessinait chaque image de zéro, Impeller compile les shaders à l’avance et les stocke dans un cache. Cela élimine les retards lors du rendu initial de scènes complexes et réduit la charge du GPU.

Les tests de l’équipe Google Flutter montrent qu’Impeller réduit le temps de compilation des shaders de 200–500 ms (Skia) à 1–3 ms. Sur iPhone 13 Pro, le rendu par impulsion d’Impeller atteint 120 FPS sans chute d’images. Sur Android avec Vulkan, il offre 60 FPS stables même sur les appareils de milieu de gamme (Xiaomi Redmi Note 12).

Exemple d’application Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Application Flutter')),
        body: const Center(
          child: Text('Bonjour, Flutter !'),
        ),
      ),
    );
  }
}

Avantages de Flutter

Base de code unique — le principal avantage de Flutter. Un projet Dart compile pour iOS, Android, Web, Windows, macOS et Linux. Selon Google, cela réduit le temps de développement de 30 à 50 % par rapport à des projets iOS et Android séparés. Alibaba a réduit le temps de sortie de version de 30 % après être passé à Flutter.

Performance de Flutter est proche du natif. La compilation AOT de Dart en code machine ARM et x86_64 élimine les retards d’interprétation. Le moteur Impeller garantit 60 FPS même sur les appareils de 2018 (iPhone XR, Samsung Galaxy S9). Selon Google, 99,5 % des images dans les applications Flutter sont rendues sans saccade.

Hot Reload — technologie de mise à jour instantanée du code. Le développeur modifie le code source, sauvegarde le fichier, et Flutter reconstruit l’arbre de widgets en 300–800 ms sans perdre l’état actuel de l’application. Cela accélère les itérations de conception UI : les marges, couleurs et animations peuvent être modifiées en secondes sans attendre une reconstruction complète.

Material Design 3 et le langage de conception natif Cupertino (style iOS) sont inclus dans le paquet standard de Flutter. Les widgets Material 3 prennent en charge les couleurs dynamiques (Material You), la mise en page adaptative et les animations de transition d’écran. CupertinoPageTransition et CupertinoNavigationBar imitent le comportement du navigateur natif iOS.

Personnalisation des widgets ne nécessite pas de créer des vues personnalisées sur chaque plateforme. Il suffit de remplacer build() et de retourner un nouveau widget. Les paquets d’animation (AnimatedContainer, Hero, TweenAnimationBuilder) et de gestes (GestureDetector, Dismissible) couvrent 95 % des scénarios d’animation UI sans écrire de code de plateforme.

Écosystème et paquets de Flutter

pub.dev est le registre officiel de paquets pour Dart et Flutter. En juillet 2024, plus de 45 000 paquets sont publiés dans le registre. L’installation d’un paquet se fait avec la commande flutter pub add <nom_du_paquet>. Pub résout automatiquement les dépendances, vérifie la compatibilité des versions et génère pubspec.lock.

La gestion d’état dans Flutter est l’un des principaux défis architecturaux. Outre flutter_bloc, les solutions populaires incluent : Provider (recommandé par Google, utilise InheritedWidget), Riverpod (une version repensée de Provider avec sécurité à la compilation) et GetX (tout-en-un : état, routage, DI). Provider reste le plus simple pour débuter : ChangeNotifierProvider enveloppe le modèle, et Consumer reconstruit le widget lors du changement de données.

Les tests dans Flutter sont pris en charge à trois niveaux. Les tests unitaires (flutter test) vérifient les fonctions et classes sans UI. Les tests de widgets (testWidgets) rendent des widgets individuels dans un environnement isolé. Les tests d’intégration (IntegrationTest) exécutent l’application complète sur un appareil ou simulateur. Flutter 3.22 a ajouté la prise en charge des tests de patch via l’analyse de patch et des rapports améliorés de couverture de code.

Paquets populaires

dio est un client HTTP avec prise en charge des intercepteurs, timeouts et FormData. Utilisé dans 40 % des projets Flutter sur GitHub. Dio prend en charge l’interception de requêtes pour la journalisation, les tentatives et l’ajout de jetons d’authentification. La deuxième bibliothèque la plus populaire est retrofit, qui génère des clients API typés.

flutter_bloc est une bibliothèque de gestion d’état basée sur le modèle BLoC (Business Logic Component). BlocProvider transmet les états dans l’arbre de widgets, BlocBuilder reconstruit l’UI lors du changement d’état, et BlocListener gère les effets secondaires (navigation, SnackBar). Cubit est une version simplifiée de BLoC sans événements.

go_router est une navigation déclarative pour Flutter par Google. Les routes sont décrites dans la configuration GoRouter avec prise en charge des routes imbriquées, des redirections et des deep links. ShellRoute divise la navigation entre les onglets BottomNavigationBar. GoRouter 14.0 prend en charge les chemins type-safe et StatefulShellRoute avec préservation de l’état des onglets.