Scaffold : définition, structure et widgets dans Flutter

Qu'est-ce que Scaffold dans Flutter

Scaffold est un widget de mise en page de la bibliothèque Material Design qui forme la structure visuelle de base d'un écran. Il implémente le modèle d'application Material standard : barre supérieure, corps d'écran, menu latéral et boutons flottants. Contrairement à Container, qui définit simplement les dimensions et le style, Scaffold gère l'écran entier comme un système unifié.

Chaque application Flutter construite avec Material Design commence par MaterialApp, à l'intérieur de laquelle chaque écran est enveloppé dans un Scaffold. C'est Scaffold qui assure l'affichage correct d'AppBar sur tous les appareils, en tenant compte de SafeArea pour iPhone X et supérieurs. Il est également responsable de l'ordre z : Drawer apparaît au-dessus de body, et SnackBar apparaît au-dessus de toute l'interface, mais en dessous des fenêtres de dialogue.

Selon la Référence de l'API Flutter (2026), Scaffold est une exigence obligatoire pour le bon fonctionnement de widgets tels que SnackBar, BottomSheet et PersistentBottomSheet. Sans Scaffold, ces composants lèvent une exception car ils dépendent de InheritedWidget Scaffold.of pour accéder au contexte de Scaffold. Par conséquent, placer du contenu directement dans Container au lieu de Scaffold est une erreur courante chez les développeurs débutants, entraînant une perte de fonctionnalité Material.

Scaffold dans la hiérarchie des widgets

Dans une application Flutter typique, Scaffold se trouve à l'intérieur de MaterialApp, généralement sous WidgetsApp ou CupertinoApp dans le développement multiplateforme. MaterialApp crée Navigator et le thème, tandis que Scaffold définit la structure de l'écran actuel. Chaque écran peut avoir son propre Scaffold avec AppBar, Drawer et BottomNavigationBar uniques, permettant une personnalisation flexible de l'interface pour une page spécifique.

Pour une personnalisation avancée, Scaffold peut être combiné avec NestedScrollView — cela permet d'implémenter des effets de défilement complexes, comme une AppBar réductible avec effet parallaxe. Cependant, dans la plupart des cas, le Scaffold standard avec ses propriétés suffit pour construire un écran prêt pour la production.

Structure de Scaffold : parties clés du framework

Scaffold se compose de plusieurs zones obligatoires et optionnelles, chacune responsable d'une partie spécifique de l'interface. Examinons chaque partie individuellement pour comprendre comment elles interagissent entre elles.

AppBar — barre supérieure

AppBar est la barre supérieure de l'écran qui affiche le titre, le bouton de navigation et les actions. Elle obtient automatiquement la hauteur correcte de 56dp et prend en compte SafeArea pour les appareils avec encoche. TabBar peut être intégré dans AppBar pour changer d'onglets en utilisant la propriété bottom.

Drawer — menu latéral

Drawer est un panneau qui glisse depuis la gauche et fournit la navigation à travers les sections de l'application. Scaffold ajoute automatiquement une icône hamburger dans AppBar si la propriété drawer est définie. Drawer peut contenir DrawerHeader, ListView avec des éléments de menu et des informations utilisateur.

BottomNavigationBar — navigation inférieure

BottomNavigationBar est un panneau en bas de l'écran pour basculer entre les sections principales. Il contient 2 à 5 icônes avec des étiquettes et prend en charge Material 3 avec indication active via NavigationBar. Scaffold le positionne en bas de l'écran, décalant automatiquement body vers le haut pour que le contenu ne soit pas masqué.

FloatingActionButton — bouton d'action flottant

FloatingActionButton est un bouton rond placé dans le coin inférieur droit de l'écran. Il est utilisé pour l'action principale sur l'écran, comme l'ajout d'une nouvelle entrée ou l'envoi d'un message. Scaffold prend en charge plusieurs FAB avec une animation étendue via les propriétés extended.

Body — contenu principal

Body est la zone centrale de l'écran où le contenu principal est placé. N'importe quel widget peut servir de body : Column, ListView, GridView, Stack ou une composition personnalisée. Scaffold calcule automatiquement la hauteur de body en tenant compte d'AppBar, BottomNavigationBar et SafeArea, éliminant le besoin d'ajustement manuel des tailles.

Principales propriétés de Scaffold

Scaffold fournit plus de 30 propriétés pour personnaliser l'apparence et le comportement de l'écran. Parmi elles, on trouve à la fois des propriétés obligatoires (body) et optionnelles qui contrôlent les marges, le fond et l'état du clavier. Comprendre chaque propriété aide à configurer précisément l'interface selon les exigences de conception.

La propriété resizeToAvoidBottomInset est particulièrement importante lors du travail avec des formulaires : lorsqu'elle est définie sur true (par défaut), Scaffold compresse automatiquement body lors de l'apparition du clavier, gardant le champ de saisie visible. Cela évite d'avoir à écrire des écouteurs de clavier personnalisés. Pour les scénarios personnalisés avec SingleChildScrollView, la propriété peut être désactivée.

Exemple d'utilisation de Scaffold dans une application

Examinons un exemple pratique de Scaffold avec un ensemble complet de composants Material. Le code crée un écran avec AppBar, Drawer, BottomNavigationBar, FloatingActionButton et SnackBar — une structure d'application mobile typique dans Flutter.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mon App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Paramètres'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Action terminée')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

L'exemple utilise NavigationBar de Material 3 au lieu de l'obsolète BottomNavigationBar. Scaffold lie automatiquement toutes les parties : lorsque Drawer s'ouvre, SnackBar se cache ; lors du changement d'onglets, body se met à jour ; et FloatingActionButton reste en place. ScaffoldMessenger garantit l'affichage de SnackBar même avec plusieurs Scaffold dans la hiérarchie.

Scaffold et Material 3 : fonctionnalités de configuration

Material 3 (M3) est l'évolution de Material Design présentée par Google en 2023. Scaffold dans M3 a reçu plusieurs changements : un nouveau widget NavigationBar au lieu de BottomNavigationBar, la prise en charge de la couleur dynamique via ColorScheme.fromSeed et des recommandations mises à jour pour les marges et les hauteurs de composants. Passer à M3 ne nécessite pas de remplacer Scaffold — il suffit de mettre à jour le thème de l'application.

Pour activer Material 3 dans un projet, il faut définir useMaterial3: true dans ThemeData. Scaffold adapte automatiquement le style visuel : les marges deviennent plus grandes (24dp au lieu de 16dp), les couleurs sont recalculées à partir de la couleur de base, et FloatingActionButton obtient des tailles plus grandes avec des coins arrondis. En même temps, toutes les propriétés existantes de Scaffold restent fonctionnelles.

Selon la Spécification Material Design 3 (2026), il est recommandé d'utiliser NavigationBar avec trois à cinq éléments au lieu de BottomNavigationBar. Scaffold prend en charge les deux options, mais NavigationBar offre un meilleur support pour l'adaptabilité et Material You sur les appareils Pixel.

Configuration de Scaffold pour Material 3

Pour le fonctionnement correct de Scaffold avec M3, il suffit de mettre à jour le thème et de remplacer BottomNavigationBar par NavigationBar. Les couleurs seront automatiquement calculées via ColorScheme.fromSeed, et Scaffold ajustera les marges aux nouvelles normes. Si nécessaire, backgroundColor peut être remplacé directement.