MaterialApp — vad det är, konfiguration och rollen för rotwidgeten

Vad är MaterialApp i Flutter?

MaterialApp — är en omslagswidget som initierar Material Design i en Flutter-applikation. Den är roten i Widget Tree och ger underordnade widgets tillgång till systemtjänster: navigering, tema, mediaförfrågningar och lokalisering. Utan MaterialApp kommer applikationen inte att ha en standard Material-stil och kommer inte att kunna använda widgets som Scaffold, AppBar, FloatingActionButton och BottomNavigationBar.

Vad MaterialApp lägger till i Widget Tree

När du använder MaterialApp lägger Flutter automatiskt till flera viktiga widgets i roten av trädet: Navigator (skärmstack för navigering), Theme (färgschema och stilar), MediaQuery (enhetsinformation), Localizations (lokaliserade strängar), Directionality (textriktning). Dessa widgets är implementerade som InheritedWidget och är tillgängliga via BuildContext var som helst i applikationen.

Grundläggande användning

Den minimala konfigurationen av MaterialApp kräver bara parametern home — widgeten som visas på huvudskärmen. Flutter lindar automatiskt in home i Scaffold, om det inte är en Scaffold, via WidgetsBinding-mekanismen. När applikationen startas med runApp(MaterialApp(home: MyHomePage())) skapar Flutter rot-Widget Tree med MaterialApp som rot.

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

I detta exempel konfigurerar MaterialApp ett grundtema (ljust och mörkt), titel och huvudskärm. Parametern title används för fönstertiteln (på skrivbordet) och för tillgänglighet. Parametrarna theme och darkTheme bestämmer applikationens utseende i olika lägen.

Struktur och parametrar för MaterialApp

MaterialApp accepterar över 30 parametrar, som är indelade i kategorier: Material Design-inställningar, routing, teman, lokalisering, felbeteende och inställningar för specifika plattformar. Kännedom om nyckelparametrar möjliggör flexibel konfiguration av applikationen utan att skriva extra kod.

Huvudsakliga konfigurationsparametrar

Parametern title ställer in applikationens namn för fönstertiteln och tillgänglighet. color bestämmer applikationsfärgen för uppgiftsväxlaren på Android. debugShowCheckedModeBanner döljer felsökningslägesbannern i releasebyggen. showPerformanceOverlay aktiverar överlägget med prestandainformation. supportDarkTheme indikerar om applikationen stöder mörkt tema.

Parametrar för specifika plattformar

MaterialApp tillhandahåller parametrar för att konfigurera beteende på olika plattformar: restorationScopeId för att spara applikationstillstånd vid omstart på Android, scrollBehavior för att konfigurera rullningsbeteende på olika operativsystem, useMaterial3 för att aktivera Material 3 (Material You). Material 3 lägger till dynamiska färger, nya komponenter och uppdaterade stilar.

Teman via theme och darkTheme

Teman — en av de viktigaste parametrarna i MaterialApp. Parametern theme tar emot ett ThemeData-objekt som bestämmer färgpalett, typografi, komponentformer och ikonografi för det ljusa temat. Parametern darkTheme — motsvarande konfiguration för det mörka temat. Flutter växlar automatiskt tema baserat på enhetens systeminställningar.

ThemeData: färgschema

ThemeData innehåller primarySwatch (primärfärg), colorScheme (utökat färgschema Material 3), brightness (ljust eller mörkt), fontFamily (standardtypsnitt), textTheme (textstilar), cardTheme, appBarTheme, buttonTheme och dussintals andra parametrar för att konfigurera specifika komponenter. Använd colorScheme för Material 3 och primarySwatch för Material 2.

Dynamiska färger i Material 3

Material 3 (Material You) stöder dynamiska färger, som extraheras från enhetens bakgrundsbild på Android 12+. För att aktivera, ställ in useMaterial3: true och använd colorScheme.fromSeed eller colorScheme.fromImageProvider. Dynamiska färger genererar automatiskt en harmonisk palett med 5 toner: primary, secondary, tertiary, neutral och neutralVariant.

Åtkomst till tema i widgets

Vilken widget som helst kan få åtkomst till det aktuella temat via Theme.of(context). Theme.of returnerar ThemeData, från vilket colors, textTheme och andra parametrar kan hämtas. För att prenumerera på temaändringar (till exempel vid växling mellan ljust och mörkt), använd kontexten inuti build-metoden — Flutter återuppbygger automatiskt widgeten vid temaändring.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Exempel på tematext",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

I detta exempel hämtar Theme.of(context) det aktuella temat från närmaste MaterialApp. Bakgrundsfärgen och textstilen matchar automatiskt det aktuella temat (ljust eller mörkt). Vid temaväxling återuppbyggs Container och Text med nya värden från uppdaterad ThemeData.

Routing och navigering i MaterialApp

MaterialApp integrerar Navigator — en stacknavigator som hanterar övergångar mellan skärmar. Parametrarna initialRoute, routes och onGenerateRoute bestämmer hur Flutter hanterar navigering. Navigator.push och Navigator.pushReplacement möjliggör programmerad skärmväxling, och Navigator.pop — återgång till föregående skärm.

Namngivna rutter (routes)

Parametern routes accepterar Map, där nyckeln är ruttenamnet (sträng) och värdet är en funktion som skapar widgeten för skärmen. Namngivna rutter är praktiska för statisk navigering: '/' (rootrutt) motsvarar vanligtvis home, '/settings', '/profile' — andra skärmar. Navigator.pushNamed(context, '/settings') navigerar till inställningsskärmen.

Ruttgenerering (onGenerateRoute)

onGenerateRoute — är en funktion som anropas när en rutt inte hittas i routes. Den tar emot RouteSettings och returnerar MaterialPageRoute. Detta tillvägagångssätt är användbart för dynamisk navigering, när rutter beror på data (till exempel /user/42). onGenerateRoute tolkar ruttenamnet, extraherar parametrar och skapar motsvarande skärm.

Djupa länkar och namngiven routing

För stöd av djupa länkar (deep links), använd parametrarna onGenerateInitialRoute och onGenerateRoute tillsammans. Djupa länkar gör det möjligt att öppna en specifik applikationsskärm via en URL (till exempel https://example.com/promo). Flutter hanterar djupa länkar på Android (via intent filters) och iOS (via universal links) och skickar sökvägen till 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;
  },
)

I detta exempel hanterar onGenerateRoute dynamiska rutter i formatet /user/42. Om rutten inte hittas i statiska routes och inte matchar det dynamiska mönstret, visar Flutter en felsida som kan konfigureras via onUnknownRoute.

Lokalisering och internationalisering

MaterialApp tillhandahåller inbyggt stöd för lokalisering via parametrarna localizationsDelegates och supportedLocales. LocalizationsDelegates laddar lokaliserade strängar, och supportedLocales bestämmer vilka språk applikationen stöder. Flutter upptäcker automatiskt enhetens språk och laddar motsvarande lokaliserade resurser.

Konfiguration av supportedLocales och localizationsDelegates

Parametern supportedLocales accepterar en lista med Locale som applikationen stöder: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — lista över delegater som laddar lokaliserade strängar. För Material Design, lägg till GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate och GlobalCupertinoLocalizations.delegate.

Lokalisering av applikationssträngar

För att lokalisera egna strängar, använd klassen AppLocalizations skapad via flutter_localizations eller paketet intl. AppLocalizations tillhandahåller statiska metoder för åtkomst till lokaliserade strängar: AppLocalizations.of(context)!.helloMessage. MaterialApp skickar automatiskt Localizations till Widget Tree, vilket gör dem tillgängliga via kontext.

• flutter_localizations — det officiella paketet för lokalisering av Material-widgets och systemsträngar.
• intl — paket för internationalisering: formatering av siffror, datum, valutor och pluralisering.
• ARB-filer — lagringsformat för lokaliserade strängar som används av flutter_localizations och intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter tillhandahåller tre rotwidgets för olika plattformar: MaterialApp (Material Design för Android och webb), CupertinoApp (iOS-stil) och WidgetsApp (grundwidget utan styling). Valet av rotwidget bestämmer utseendet på hela applikationen och tillgängligheten av plattformskomponenter.

MaterialApp: universellt val

MaterialApp passar de flesta applikationer tack vare stöd för Material Design, som ser bra ut på Android, webb och skrivbord. Material Design tillhandahåller ett rikt bibliotek av komponenter: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog och många andra. MaterialApp stöder också Material 3 med dynamiska färger.

CupertinoApp: iOS-stil

CupertinoApp använder Cupertino Design enligt Apples Human Interface Guidelines. Den tillhandahåller CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar och andra iOS-stilade komponenter. Använd CupertinoApp för iOS-applikationer eller applikationer som följer Apple-stil på alla plattformar.

WidgetsApp: minimal rot

WidgetsApp — är en grundläggande rotwidget utan styling. Den lägger till Navigator, MediaQuery och Localizations, men tillhandahåller inte teman eller Material/Cupertino-komponenter. WidgetsApp passar för anpassade designsystem, spel eller applikationer med egen styling, där Material eller Cupertino är överflödigt.