MaterialApp — wat is het, configuratie en rol van de rootwidget

Wat is MaterialApp in Flutter?

MaterialApp — is een wrapper-widget die Material Design initialiseert in een Flutter-applicatie. Het is de root van de Widget Tree en biedt onderliggende widgets toegang tot systeemdiensten: navigatie, thema, mediaquery's en lokalisatie. Zonder MaterialApp heeft de applicatie geen standaard Material-stijl en kan het geen widgets zoals Scaffold, AppBar, FloatingActionButton en BottomNavigationBar gebruiken.

Wat MaterialApp toevoegt aan de Widget Tree

Bij gebruik van MaterialApp voegt Flutter automatisch verschillende belangrijke widgets toe aan de root van de boom: Navigator (schermstapel voor navigatie), Theme (kleurenschema en stijlen), MediaQuery (apparaatinformatie), Localizations (gelokaliseerde tekenreeksen), Directionality (tekstrichting). Deze widgets zijn geïmplementeerd als InheritedWidget en zijn toegankelijk via BuildContext op elke plek in de applicatie.

Basisgebruik

De minimale configuratie van MaterialApp vereist alleen de parameter home — de widget die op het hoofdscherm wordt weergegeven. Flutter wikkelt home automatisch in Scaffold, als het geen Scaffold is, via het WidgetsBinding-mechanisme. Bij het starten van de applicatie met runApp(MaterialApp(home: MyHomePage())) creëert Flutter de root Widget Tree met MaterialApp als root.

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 dit voorbeeld configureert MaterialApp een basisthema (licht en donker), titel en hoofdscherm. De parameter title wordt gebruikt voor de venstertitel (op desktop) en voor toegankelijkheid. De parameters theme en darkTheme bepalen het uiterlijk van de applicatie in verschillende modi.

Structuur en parameters van MaterialApp

MaterialApp accepteert meer dan 30 parameters, die zijn onderverdeeld in categorieën: Material Design-instellingen, routing, thema-instellingen, lokalisatie, foutgedrag en instellingen voor specifieke platforms. Kennis van de belangrijkste parameters maakt flexibele configuratie van de applicatie mogelijk zonder extra code te schrijven.

Belangrijkste configuratieparameters

De parameter title stelt de applicatienaam in voor de venstertitel en toegankelijkheid. color bepaalt de applicatiekleur voor de taakwisselaar op Android. debugShowCheckedModeBanner verbergt de debug-modusbanner in de releasebuild. showPerformanceOverlay schakelt de overlay met prestatie-informatie in. supportDarkTheme geeft aan of de applicatie een donker thema ondersteunt.

Parameters voor specifieke platforms

MaterialApp biedt parameters voor het configureren van gedrag op verschillende platforms: restorationScopeId voor het opslaan van de applicatiestatus bij herstart op Android, scrollBehavior voor het configureren van scrollgedrag op verschillende besturingssystemen, useMaterial3 voor het inschakelen van Material 3 (Material You). Material 3 voegt dynamische kleuren, nieuwe componenten en bijgewerkte stijlen toe.

Thema-instellingen via theme en darkTheme

Thema-instellingen — een van de belangrijkste parameters van MaterialApp. De parameter theme ontvangt een ThemeData-object dat het kleurenpalet, de typografie, componentvormen en iconografie voor het lichte thema bepaalt. De parameter darkTheme — een vergelijkbare configuratie voor het donkere thema. Flutter schakelt automatisch van thema op basis van de systeeminstellingen van het apparaat.

ThemeData: kleurenschema

ThemeData bevat primarySwatch (primaire kleur), colorScheme (uitgebreid kleurenschema Material 3), brightness (licht of donker), fontFamily (standaardlettertype), textTheme (tekststijlen), cardTheme, appBarTheme, buttonTheme en tientallen andere parameters voor het configureren van specifieke componenten. Gebruik colorScheme voor Material 3 en primarySwatch voor Material 2.

Dynamische kleuren van Material 3

Material 3 (Material You) ondersteunt dynamische kleuren, die worden geëxtraheerd uit de achtergrond van het apparaat op Android 12+. Om in te schakelen, stelt u useMaterial3: true in en gebruikt u colorScheme.fromSeed of colorScheme.fromImageProvider. Dynamische kleuren genereren automatisch een harmonieus palet van 5 tinten: primary, secondary, tertiary, neutral en neutralVariant.

Toegang tot thema in widgets

Elke widget heeft toegang tot het huidige thema via Theme.of(context). Theme.of retourneert ThemeData, waaruit colors, textTheme en andere parameters kunnen worden opgehaald. Om u te abonneren op themawijzigingen (bijvoorbeeld bij schakelen tussen licht en donker), gebruikt u de context binnen de build-methode — Flutter herbouwt de widget automatisch bij themawijziging.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Voorbeeld van gethematiseerde tekst",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

In dit voorbeeld haalt Theme.of(context) het huidige thema op uit de dichtstbijzijnde MaterialApp. De achtergrondkleur en tekststijl komen automatisch overeen met het huidige thema (licht of donker). Bij het schakelen van thema worden Container en Text herbouwd met nieuwe waarden uit bijgewerkte ThemeData.

Routing en navigatie in MaterialApp

MaterialApp integreert Navigator — een stapelnavigator die overgangen tussen schermen beheert. De parameters initialRoute, routes en onGenerateRoute bepalen hoe Flutter navigatie verwerkt. Navigator.push en Navigator.pushReplacement maken programmatisch schakelen tussen schermen mogelijk, en Navigator.pop — terugkeren naar het vorige scherm.

Benoemde routes (routes)

De parameter routes accepteert Map, waarbij de sleutel de routenaam is (tekenreeks) en de waarde een functie die de widget voor het scherm creëert. Benoemde routes zijn handig voor statische navigatie: '/' (rootroute) komt meestal overeen met home, '/settings', '/profile' — andere schermen. Navigator.pushNamed(context, '/settings') navigeert naar het instellingenscherm.

Routegeneratie (onGenerateRoute)

onGenerateRoute — is een functie die wordt aangeroepen wanneer een route niet wordt gevonden in routes. Het ontvangt RouteSettings en retourneert MaterialPageRoute. Deze benadering is nuttig voor dynamische navigatie, wanneer routes afhankelijk zijn van gegevens (bijvoorbeeld /user/42). onGenerateRoute parseert de routenaam, extraheert parameters en creëert het bijbehorende scherm.

Diepe links en named routing

Voor ondersteuning van diepe links (deep links), gebruikt u de parameters onGenerateInitialRoute en onGenerateRoute samen. Diepe links maken het mogelijk om een specifiek applicatiescherm te openen via een URL (bijvoorbeeld https://example.com/promo). Flutter verwerkt diepe links op Android (via intent filters) en iOS (via universal links) en geeft het pad door aan 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 dit voorbeeld verwerkt onGenerateRoute dynamische routes in de vorm /user/42. Als de route niet wordt gevonden in statische routes en niet overeenkomt met het dynamische patroon, toont Flutter een foutpagina die kan worden geconfigureerd via onUnknownRoute.

Lokalisatie en internationalisatie

MaterialApp biedt ingebouwde ondersteuning voor lokalisatie via de parameters localizationsDelegates en supportedLocales. LocalizationsDelegates laden gelokaliseerde tekenreeksen, en supportedLocales bepaalt welke talen de applicatie ondersteunt. Flutter detecteert automatisch de taal van het apparaat en laadt de bijbehorende gelokaliseerde bronnen.

Configuratie van supportedLocales en localizationsDelegates

De parameter supportedLocales accepteert een lijst van Locale die de applicatie ondersteunt: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — lijst van delegaten die gelokaliseerde tekenreeksen laden. Voor Material Design voegt u GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate en GlobalCupertinoLocalizations.delegate toe.

Lokalisatie van applicatietekenreeksen

Voor het lokaliseren van eigen tekenreeksen gebruikt u de klasse AppLocalizations, gemaakt via flutter_localizations of het pakket intl. AppLocalizations biedt statische methoden voor toegang tot gelokaliseerde tekenreeksen: AppLocalizations.of(context)!.helloMessage. MaterialApp geeft Localizations automatisch door aan de Widget Tree, waardoor ze toegankelijk zijn via context.

• flutter_localizations — het officiële pakket voor lokalisatie van Material-widgets en systeemtekenreeksen.
• intl — pakket voor internationalisatie: formatteren van getallen, datums, valuta's en pluralisatie.
• ARB-bestanden — opslagformaat voor gelokaliseerde tekenreeksen gebruikt door flutter_localizations en intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter biedt drie rootwidgets voor verschillende platforms: MaterialApp (Material Design voor Android en web), CupertinoApp (iOS-stijl) en WidgetsApp (basiswidget zonder styling). De keuze van de rootwidget bepaalt het uiterlijk van de hele applicatie en de beschikbaarheid van platformcomponenten.

MaterialApp: universele keuze

MaterialApp is geschikt voor de meeste applicaties dankzij ondersteuning voor Material Design, dat er goed uitziet op Android, web en desktop. Material Design biedt een rijke bibliotheek aan componenten: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog en vele andere. MaterialApp ondersteunt ook Material 3 met dynamische kleuren.

CupertinoApp: iOS-stijl

CupertinoApp gebruikt Cupertino Design volgens de Human Interface Guidelines van Apple. Het biedt CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar en andere iOS-gestylde componenten. Gebruik CupertinoApp voor iOS-applicaties of applicaties die de Apple-stijl op alle platforms volgen.

WidgetsApp: minimale root

WidgetsApp — is een basis rootwidget zonder styling. Het voegt Navigator, MediaQuery en Localizations toe, maar biedt geen thema's of Material/Cupertino-componenten. WidgetsApp is geschikt voor aangepaste designsystemen, games of applicaties met eigen styling, waar Material of Cupertino overbodig is.