MaterialApp : qu'est-ce que c'est et comment configurer le widget racine

Qu'est-ce que MaterialApp dans Flutter ?

MaterialApp est un widget wrapper qui initialise Material Design dans une application Flutter. Il est la racine de l'arbre de widgets (Widget Tree) et fournit aux widgets enfants l'accès aux services système : navigation, thème, media queries et localisation. Sans MaterialApp, l'application n'aura pas le style Material standard et ne pourra pas utiliser des widgets tels que Scaffold, AppBar, FloatingActionButton et BottomNavigationBar.

Ce que MaterialApp ajoute à l'arbre de widgets

En utilisant MaterialApp, Flutter ajoute automatiquement plusieurs widgets clés à la racine de l'arbre : Navigator (pile d'écrans pour la navigation), Theme (palette de couleurs et styles), MediaQuery (informations sur l'appareil), Localizations (chaînes localisées), Directionality (direction du texte). Ces widgets sont implémentés comme InheritedWidgets et sont accessibles via BuildContext partout dans l'application.

Utilisation de base

La configuration minimale de MaterialApp nécessite uniquement le paramètre home — le widget affiché sur l'écran principal. Flutter enveloppe automatiquement home dans un Scaffold s'il n'en est pas déjà un, via le mécanisme WidgetsBinding. Lorsque vous lancez l'application avec runApp(MaterialApp(home: MyHomePage())), Flutter crée un arbre de widgets racine avec MaterialApp comme racine.

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

Dans cet exemple, MaterialApp configure le thème de base (clair et sombre), le titre et l'écran principal. Le paramètre title est utilisé pour le titre de la fenêtre (sur le bureau) et pour l'accessibilité. Les paramètres theme et darkTheme définissent l'apparence de l'application dans différents modes.

Structure et paramètres de MaterialApp

MaterialApp accepte plus de 30 paramètres, répartis en catégories : paramètres Material Design, routage, thème, localisation, comportement d'erreur et paramètres spécifiques à la plateforme. Connaître les paramètres clés permet de configurer l'application de manière flexible sans écrire de code supplémentaire.

Paramètres de configuration principaux

Le paramètre title définit le nom de l'application pour le titre de la fenêtre et l'accessibilité. color définit la couleur de l'application pour le sélecteur de tâches sur Android. debugShowCheckedModeBanner masque la bannière du mode débogage dans les versions release. showPerformanceOverlay active une superposition avec des informations de performance. supportDarkTheme indique si l'application prend en charge le thème sombre.

Paramètres spécifiques à la plateforme

MaterialApp fournit des paramètres pour configurer le comportement sur différentes plateformes : restorationScopeId pour préserver l'état de l'application au redémarrage sur Android, scrollBehavior pour configurer le comportement de défilement sur différents OS, useMaterial3 pour activer Material 3 (Material You). Material 3 ajoute des couleurs dynamiques, de nouveaux composants et des styles mis à jour.

Thème avec theme et darkTheme

Le thème est l'un des principaux paramètres de MaterialApp. Le paramètre theme accepte un objet ThemeData qui définit la palette de couleurs, la typographie, les formes des composants et l'iconographie pour le thème clair. Le paramètre darkTheme est la configuration équivalente pour le thème sombre. Flutter change automatiquement de thème en fonction des paramètres système de l'appareil.

ThemeData : palette de couleurs

ThemeData inclut primarySwatch (couleur primaire), colorScheme (palette de couleurs étendue Material 3), brightness (clair ou sombre), fontFamily (police par défaut), textTheme (styles de texte), cardTheme, appBarTheme, buttonTheme et des dizaines d'autres paramètres pour personnaliser des composants spécifiques. Utilisez colorScheme pour Material 3 et primarySwatch pour Material 2.

Couleurs dynamiques de Material 3

Material 3 (Material You) prend en charge les couleurs dynamiques, extraites du fond d'écran de l'appareil sur Android 12+. Pour les activer, définissez useMaterial3: true et utilisez colorScheme.fromSeed ou colorScheme.fromImageProvider. Les couleurs dynamiques génèrent automatiquement une palette harmonieuse de 5 tons : primary, secondary, tertiary, neutral et neutralVariant.

Accès au thème dans les widgets

Tout widget peut accéder au thème actuel via Theme.of(context). Theme.of retourne un objet ThemeData à partir duquel vous pouvez obtenir colors, textTheme et d'autres paramètres. Pour vous abonner aux changements de thème (par exemple, lors du passage entre le mode clair et sombre), utilisez le contexte dans la méthode build — Flutter reconstruira automatiquement le widget lors du changement de thème.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Dans cet exemple, Theme.of(context) obtient le thème actuel du MaterialApp le plus proche. La couleur de fond et le style de texte correspondent automatiquement au thème actuel (clair ou sombre). Lors du changement de thème, le Container et le Text seront reconstruits avec les nouvelles valeurs du ThemeData mis à jour.

Routage et navigation dans MaterialApp

MaterialApp intègre Navigator — un navigateur basé sur une pile qui gère les transitions entre les écrans. Les paramètres initialRoute, routes et onGenerateRoute déterminent comment Flutter gère la navigation. Navigator.push et Navigator.pushReplacement permettent de changer d'écran par programmation, tandis que Navigator.pop permet de revenir en arrière.

Routes nommées (routes)

Le paramètre routes accepte un Map<String, WidgetBuilder>, où la clé est le nom de la route (chaîne) et la valeur est une fonction qui crée le widget pour cet écran. Les routes nommées sont pratiques pour la navigation statique : '/' (route racine) correspond généralement à home, '/settings', '/profile' — d'autres écrans. Navigator.pushNamed(context, '/settings') navigue vers l'écran des paramètres.

Génération de routes (onGenerateRoute)

onGenerateRoute est une fonction appelée lorsqu'une route n'est pas trouvée dans routes. Elle accepte RouteSettings et retourne un MaterialPageRoute. Cette approche est utile pour la navigation dynamique lorsque les routes dépendent de données (par exemple, /user/42). onGenerateRoute analyse le nom de la route, extrait les paramètres et crée l'écran approprié.

Liens profonds et routage nommé

Pour prendre en charge les liens profonds (deep links), utilisez les paramètres onGenerateInitialRoute et onGenerateRoute ensemble. Les liens profonds permettent d'ouvrir un écran spécifique de l'application via une URL (par exemple, https://example.com/promo). Flutter gère les liens profonds sur Android (via les intent filters) et iOS (via les universal links) et transmet le chemin à onGenerateRoute.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

Dans cet exemple, onGenerateRoute gère les routes dynamiques comme /user/42. Si la route n'est pas trouvée dans les routes statiques et ne correspond pas au modèle dynamique, Flutter affiche une page d'erreur, qui peut être personnalisée via onUnknownRoute.

Localisation et internationalisation

MaterialApp fournit une prise en charge intégrée de la localisation via les paramètres localizationsDelegates et supportedLocales. LocalizationsDelegates charge les chaînes localisées, et supportedLocales détermine les langues prises en charge par l'application. Flutter détecte automatiquement la langue de l'appareil et charge les ressources localisées correspondantes.

Configuration de supportedLocales et localizationsDelegates

Le paramètre supportedLocales accepte une liste de Locales que l'application prend en charge : [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates est une liste de délégués qui chargent les chaînes localisées. Pour Material Design, ajoutez GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate et GlobalCupertinoLocalizations.delegate.

Localisation des chaînes de l'application

Pour localiser vos propres chaînes, utilisez la classe AppLocalizations, créée via flutter_localizations ou le package intl. AppLocalizations fournit des méthodes statiques pour accéder aux chaînes localisées : AppLocalizations.of(context)!.helloMessage. MaterialApp transmet automatiquement Localizations à l'arbre de widgets, les rendant accessibles via le contexte.

• flutter_localizations — le package officiel pour localiser les widgets Material et les chaînes système.
• intl — le package pour l'internationalisation : formatage des nombres, dates, devises et pluriels.
• Fichiers ARB — le format de stockage des chaînes localisées, utilisé par flutter_localizations et intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter fournit trois widgets racines pour différentes plateformes : MaterialApp (Material Design pour Android et le web), CupertinoApp (style iOS) et WidgetsApp (widget de base sans style). Le choix du widget racine détermine l'apparence de l'ensemble de l'application et la disponibilité des composants spécifiques à la plateforme.

MaterialApp : le choix universel

MaterialApp convient à la plupart des applications grâce à la prise en charge de Material Design, qui offre un rendu excellent sur Android, le web et le bureau. Material Design fournit une riche bibliothèque de composants : Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog et bien d'autres. MaterialApp prend également en charge Material 3 avec des couleurs dynamiques.

CupertinoApp : style iOS

CupertinoApp utilise Cupertino Design, qui suit les Human Interface Guidelines d'Apple. Il fournit CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar et d'autres composants stylisés iOS. Utilisez CupertinoApp pour les applications iOS ou les applications qui suivent le style Apple sur toutes les plateformes.

WidgetsApp : racine minimale

WidgetsApp est le widget racine de base sans style. Il ajoute Navigator, MediaQuery et Localizations, mais ne fournit pas de thèmes ni de composants Material/Cupertino. WidgetsApp convient aux systèmes de conception personnalisés, aux jeux ou aux applications avec leur propre style où Material ou Cupertino est excessif.