AppBar — définition, configuration et widgets Flutter

Qu’est-ce qu’AppBar dans Flutter

AppBar est un composant Material standard de panneau supérieur qui apparaît en haut d’un Scaffold. Il contient le titre de l’écran, un bouton de navigation (généralement une icône « hamburger » ou une flèche « Retour ») et des actions — des icônes qui ouvrent la recherche, les paramètres ou d’autres fonctions. AppBar s’adapte automatiquement à la plateforme : sous Android, il utilise l’ombre inférieure Material standard, sous iOS — un design plus plat avec transparence.

AppBar implémente l’interface PreferredSizeWidget, ce qui signifie que sa hauteur est fixe et connue avant la construction. Par défaut, la hauteur d’AppBar est de 56dp sous Android et 44dp sous iOS en orientation portrait, en tenant compte de SafeArea en haut. Cette fonctionnalité permet à Scaffold de calculer à l’avance l’espace disponible pour le body, évitant ainsi une recomposition lors du rendu.

Selon Flutter Material Library Guide (2026), AppBar a connu plusieurs itérations : dans Flutter 1.x, c’était un simple conteneur avec du texte, dans Flutter 2.x, il a obtenu la prise en charge de Material 3 et flexibleSpace, et dans Flutter 3.x — l’intégration avec System UI (couleur de la barre d’état, transparence). L’AppBar moderne prend en charge Dynamic Color de Material You sur les appareils Android 12+.

Structure d’AppBar : propriétés et paramètres

AppBar fournit un ensemble de paramètres qui contrôlent chaque partie du panneau supérieur. Comprendre ces propriétés permet de personnaliser le panneau de manière flexible pour toute exigence de conception sans créer de solutions personnalisées.

Title et leading : configuration du titre et de la navigation

La propriété title accepte n’importe quel widget, mais le plus courant est d’utiliser Text avec une configuration de style via TextStyle. Pour les titres longs, il est recommandé d’envelopper title dans Flexible afin que le texte soit correctement tronqué lorsque l’espace est limité. La propriété leading est automatiquement remplacée par BackButton lors de la navigation vers un écran imbriqué via Navigator.push, si elle n’est pas définie explicitement.

Actions : placement des icônes d’action

La liste actions contient des widgets alignés sur le bord droit d’AppBar. Chaque élément ne doit pas dépasser 48dp de largeur (standard Material Design). Pour regrouper les actions, utilisez PopupMenuButton — cela masque les options moins importantes dans un menu déroulant et respecte les recommandations Material concernant la densité de l’interface.

Personnalisation d’AppBar : styles, couleurs et comportement

AppBar prend en charge une personnalisation approfondie via les propriétés de couleur, d’ombre et de remplissage. Le style de base est hérité du thème de l’application, mais chaque propriété peut être remplacée individuellement. Examinons les principaux scénarios de configuration.

La couleur de fond d’AppBar est définie via backgroundColor. Si elle n’est pas spécifiée, appBarTheme de ThemeData est utilisé. Dans Material 3, la couleur d’AppBar est automatiquement calculée à partir de ColorScheme.primary, mais peut être remplacée pour un écran spécifique. Pour une AppBar transparente (souvent utilisée dans les profils), définissez backgroundColor : Colors.transparent avec elevation : 0.

La propriété elevation contrôle l’ombre sous AppBar. La valeur 0 supprime l’ombre, créant un effet de panneau « plat », pertinent pour Material 3. La valeur 4 donne l’ombre standard Material Design. Pour un contrôle personnalisé de l’ombre, utilisez shadowColor — la couleur d’ombre qui sépare visuellement le panneau du contenu.

Pour contrôler la couleur du texte dans AppBar, utilisez foregroundColor. Cette propriété affecte la couleur du titre, des icônes et du texte dans actions. Lors du changement de backgroundColor, un foregroundColor contrastant est automatiquement sélectionné, mais il peut être imposé pour des designs non standard.

SliverAppBar : version animée d’AppBar

SliverAppBar est une extension d’AppBar pour une utilisation dans CustomScrollView qui prend en charge l’animation au défilement : repliement, effet parallaxe et fixation. Contrairement à une AppBar standard, SliverAppBar est un widget sliver et peut changer de taille dynamiquement en fonction de la position de défilement.

Les modes principaux de SliverAppBar sont déterminés par une combinaison des propriétés pinned, floating et snap. En mode pinned, le panneau reste toujours visible en haut de l’écran. En mode floating, il apparaît lors du défilement arrière. La combinaison floating + snap crée un comportement de panneau « collant » qui apparaît au moindre défilement vers le haut, souvent utilisé dans les fils d’actualité.

Selon Flutter API SliverAppBar (2026), pour utiliser SliverAppBar, il faut remplacer un ListView ou Column standard par CustomScrollView contenant des widgets sliver. Scaffold continue de fonctionner correctement, mais la propriété appBar de Scaffold doit être null — SliverAppBar est placé dans CustomScrollView comme premier sliver.

Exemple de configuration d’AppBar dans une application

Voyons un exemple d’AppBar avec recherche, menu déroulant et TabBar. Ce code illustre une configuration typique du panneau supérieur dans une application de production Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('Catalogue'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Paramètres')),
          const PopupMenuItem(value: 'about', child: Text('À propos de l’application')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Dans l’exemple, AppBar contient un titre centré, un bouton d’ouverture de Drawer à gauche, une icône de recherche et un menu déroulant à droite. TabBar en bas permet de basculer entre les catégories de produits. Cette configuration couvre la plupart des scénarios d’applications mobiles : navigation, recherche, options supplémentaires et changement de sections — le tout dans un seul panneau supérieur.