MaterialApp: Was es ist und wie man das Root-Widget einrichtet

Was ist MaterialApp in Flutter?

MaterialApp ist ein Wrapper-Widget, das Material Design in einer Flutter-Anwendung initialisiert. Es ist die Wurzel des Widget Tree und bietet untergeordneten Widgets Zugriff auf Systemdienste: Navigation, Thema, Media Queries und Lokalisierung. Ohne MaterialApp hat die Anwendung keinen Standard-Material-Stil und kann keine Widgets wie Scaffold, AppBar, FloatingActionButton und BottomNavigationBar verwenden.

Was MaterialApp zum Widget Tree hinzufügt

Bei Verwendung von MaterialApp fügt Flutter automatisch mehrere wichtige Widgets zur Wurzel des Baums hinzu: Navigator (Bildschirmstapel für Navigation), Theme (Farbschema und Stile), MediaQuery (Geräteinformationen), Localizations (lokalisierte Zeichenketten), Directionality (Textrichtung). Diese Widgets sind als InheritedWidgets implementiert und über BuildContext überall in der Anwendung zugänglich.

Grundlegende Verwendung

Die minimale Konfiguration von MaterialApp erfordert nur den Parameter home — das Widget, das auf dem Hauptbildschirm angezeigt wird. Flutter umschließt home automatisch mit einem Scaffold, falls es nicht bereits eines ist, über den WidgetsBinding-Mechanismus. Wenn Sie die Anwendung mit runApp(MaterialApp(home: MyHomePage())) starten, erstellt Flutter einen Root-Widget Tree mit MaterialApp als Wurzel.

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(),
    );
  }
}

In diesem Beispiel konfiguriert MaterialApp das grundlegende Theme (hell und dunkel), den Titel und den Hauptbildschirm. Der Parameter title wird für den Fenstertitel (auf dem Desktop) und für die Barrierefreiheit verwendet. Die Parameter theme und darkTheme definieren das Erscheinungsbild der Anwendung in verschiedenen Modi.

Struktur und Parameter von MaterialApp

MaterialApp akzeptiert über 30 Parameter, die in Kategorien unterteilt sind: Material Design-Einstellungen, Routing, Theming, Lokalisierung, Fehlerverhalten und plattformspezifische Einstellungen. Die Kenntnis der wichtigsten Parameter ermöglicht eine flexible Konfiguration der Anwendung ohne zusätzlichen Code.

Wichtige Konfigurationsparameter

Der Parameter title legt den Anwendungsnamen für den Fenstertitel und die Barrierefreiheit fest. color definiert die Anwendungsfarbe für den Aufgabenwechsel unter Android. debugShowCheckedModeBanner blendet das Debug-Modus-Banner in Release-Builds aus. showPerformanceOverlay aktiviert ein Overlay mit Leistungsinformationen. supportDarkTheme gibt an, ob die Anwendung das dunkle Theme unterstützt.

Plattformspezifische Parameter

MaterialApp bietet Parameter zur Konfiguration des Verhaltens auf verschiedenen Plattformen: restorationScopeId zum Erhalten des Anwendungszustands beim Neustart unter Android, scrollBehavior zum Konfigurieren des Scrollverhaltens auf verschiedenen Betriebssystemen, useMaterial3 zum Aktivieren von Material 3 (Material You). Material 3 fügt dynamische Farben, neue Komponenten und aktualisierte Stile hinzu.

Theming mit theme und darkTheme

Theming ist einer der Hauptparameter von MaterialApp. Der Parameter theme akzeptiert ein ThemeData-Objekt, das die Farbpalette, Typografie, Komponentenformen und Icons für das helle Theme definiert. Der Parameter darkTheme ist die entsprechende Konfiguration für das dunkle Theme. Flutter wechselt automatisch das Theme basierend auf den Systemeinstellungen des Geräts.

ThemeData: Farbschema

ThemeData umfasst primarySwatch (Primärfarbe), colorScheme (erweitertes Material 3-Farbschema), brightness (hell oder dunkel), fontFamily (Standardschriftart), textTheme (Textstile), cardTheme, appBarTheme, buttonTheme und Dutzende anderer Parameter zur Anpassung spezifischer Komponenten. Verwenden Sie colorScheme für Material 3 und primarySwatch für Material 2.

Dynamische Farben von Material 3

Material 3 (Material You) unterstützt dynamische Farben, die aus dem Gerätehintergrund unter Android 12+ extrahiert werden. Zum Aktivieren setzen Sie useMaterial3: true und verwenden colorScheme.fromSeed oder colorScheme.fromImageProvider. Dynamische Farben erzeugen automatisch eine harmonische Palette aus 5 Tönen: primary, secondary, tertiary, neutral und neutralVariant.

Zugriff auf das Theme in Widgets

Jedes Widget kann über Theme.of(context) auf das aktuelle Theme zugreifen. Theme.of gibt ein ThemeData-Objekt zurück, aus dem Sie colors, textTheme und andere Parameter abrufen können. Um Theme-Änderungen zu abonnieren (z.B. beim Wechsel zwischen hellem und dunklem Modus), verwenden Sie den Kontext innerhalb der build-Methode — Flutter baut das Widget bei einer Theme-Änderung automatisch neu auf.

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

In diesem Beispiel holt Theme.of(context) das aktuelle Theme vom nächsten MaterialApp. Die Hintergrundfarbe und der Textstil entsprechen automatisch dem aktuellen Theme (hell oder dunkel). Beim Wechsel des Themes werden Container und Text mit neuen Werten aus dem aktualisierten ThemeData neu aufgebaut.

Routing und Navigation in MaterialApp

MaterialApp integriert Navigator — einen stapelbasierten Navigator, der Übergänge zwischen Bildschirmen verwaltet. Die Parameter initialRoute, routes und onGenerateRoute bestimmen, wie Flutter die Navigation handhabt. Navigator.push und Navigator.pushReplacement ermöglichen das programmatische Wechseln von Bildschirmen, während Navigator.pop das Zurückgehen ermöglicht.

Benannte Routen (routes)

Der Parameter routes akzeptiert ein Map<String, WidgetBuilder>, wobei der Schlüssel der Routenname (String) und der Wert eine Funktion ist, die das Widget für diesen Bildschirm erstellt. Benannte Routen sind praktisch für statische Navigation: '/' (Stammroute) entspricht normalerweise home, '/settings', '/profile' — andere Bildschirme. Navigator.pushNamed(context, '/settings') navigiert zum Einstellungsbildschirm.

Routengenerierung (onGenerateRoute)

onGenerateRoute ist eine Funktion, die aufgerufen wird, wenn eine Route nicht in routes gefunden wird. Sie akzeptiert RouteSettings und gibt einen MaterialPageRoute zurück. Dieser Ansatz ist nützlich für dynamische Navigation, wenn Routen von Daten abhängen (z.B. /user/42). onGenerateRoute analysiert den Routennamen, extrahiert Parameter und erstellt den entsprechenden Bildschirm.

Deep Links und benanntes Routing

Zur Unterstützung von Deep Links verwenden Sie die Parameter onGenerateInitialRoute und onGenerateRoute zusammen. Deep Links ermöglichen das Öffnen eines bestimmten Anwendungsbildschirms über eine URL (z.B. https://example.com/promo). Flutter verarbeitet Deep Links unter Android (über Intent-Filter) und iOS (über Universal Links) und übergibt den Pfad an 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;
  },
)

In diesem Beispiel behandelt onGenerateRoute dynamische Routen wie /user/42. Wenn die Route weder in den statischen routes gefunden wird noch dem dynamischen Muster entspricht, zeigt Flutter eine Fehlerseite an, die über onUnknownRoute angepasst werden kann.

Lokalisierung und Internationalisierung

MaterialApp bietet integrierte Lokalisierungsunterstützung über die Parameter localizationsDelegates und supportedLocales. LocalizationsDelegates laden lokalisierte Zeichenketten, und supportedLocales bestimmt, welche Sprachen die Anwendung unterstützt. Flutter erkennt automatisch die Gerätesprache und lädt die entsprechenden lokalisierten Ressourcen.

Konfiguration von supportedLocales und localizationsDelegates

Der Parameter supportedLocales akzeptiert eine Liste von Locales, die die Anwendung unterstützt: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates ist eine Liste von Delegaten, die lokalisierte Zeichenketten laden. Für Material Design fügen Sie GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate und GlobalCupertinoLocalizations.delegate hinzu.

Lokalisierung von Anwendungszeichenketten

Um eigene Zeichenketten zu lokalisieren, verwenden Sie die Klasse AppLocalizations, die über flutter_localizations oder das intl-Paket erstellt wurde. AppLocalizations bietet statische Methoden für den Zugriff auf lokalisierte Zeichenketten: AppLocalizations.of(context)!.helloMessage. MaterialApp übergibt Localizations automatisch an den Widget Tree und macht sie über den Kontext zugänglich.

• flutter_localizations — das offizielle Paket zur Lokalisierung von Material-Widgets und Systemzeichenketten.
• intl — das Paket für die Internationalisierung: Formatierung von Zahlen, Daten, Währungen und Pluralformen.
• ARB-Dateien — das Format zum Speichern lokalisierter Zeichenketten, verwendet von flutter_localizations und intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter bietet drei Root-Widgets für verschiedene Plattformen: MaterialApp (Material Design für Android und Web), CupertinoApp (iOS-Stil) und WidgetsApp (Basis-Widget ohne Styling). Die Wahl des Root-Widgets bestimmt das Erscheinungsbild der gesamten Anwendung und die Verfügbarkeit plattformspezifischer Komponenten.

MaterialApp: die universelle Wahl

MaterialApp eignet sich für die meisten Anwendungen dank der Material Design-Unterstützung, die auf Android, Web und Desktop großartig aussieht. Material Design bietet eine umfangreiche Komponentenbibliothek: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog und viele mehr. MaterialApp unterstützt auch Material 3 mit dynamischen Farben.

CupertinoApp: iOS-Stil

CupertinoApp verwendet Cupertino Design, das den Human Interface Guidelines von Apple folgt. Es bietet CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar und andere iOS-stilisierte Komponenten. Verwenden Sie CupertinoApp für iOS-Anwendungen oder Anwendungen, die auf allen Plattformen dem Apple-Stil folgen.

WidgetsApp: minimale Wurzel

WidgetsApp ist das grundlegende Root-Widget ohne Styling. Es fügt Navigator, MediaQuery und Localizations hinzu, bietet aber keine Themes oder Material/Cupertino-Komponenten. WidgetsApp eignet sich für benutzerdefinierte Designsysteme, Spiele oder Anwendungen mit eigenem Styling, bei denen Material oder Cupertino überdimensioniert ist.