MaterialApp — mi ez, konfiguráció és a gyökér widget szerepe

Mi az a MaterialApp a Flutter-ben?

MaterialApp — egy wrapper widget, amely inicializálja a Material Design-t a Flutter-alkalmazásban. Ez a Widget Tree gyökere, és hozzáférést biztosít a gyermek widgetek számára a rendszerszolgáltatásokhoz: navigáció, téma, média lekérdezések és lokalizáció. MaterialApp nélkül az alkalmazás nem rendelkezik szabványos Material stílussal, és nem tudja használni az olyan widgeteket, mint a Scaffold, AppBar, FloatingActionButton és BottomNavigationBar.

Mit ad hozzá a MaterialApp a Widget Tree-hez

A MaterialApp használatakor a Flutter automatikusan több kulcsfontosságú widgetet ad hozzá a fa gyökeréhez: Navigator (képernyő verem a navigációhoz), Theme (színséma és stílusok), MediaQuery (eszköz információ), Localizations (lokalizált karakterláncok), Directionality (szöveg iránya). Ezek a widgetek InheritedWidget-ként vannak implementálva, és a BuildContext-en keresztül az alkalmazás bármely pontján elérhetők.

Alapvető használat

A MaterialApp minimális konfigurációja csak a home paramétert igényli — a főképernyőn megjelenő widgetet. A Flutter automatikusan becsomagolja a home-ot Scaffold-ba, ha az nem Scaffold, a WidgetsBinding mechanizmuson keresztül. Az alkalmazás runApp(MaterialApp(home: MyHomePage())) indításakor a Flutter létrehozza a gyökér Widget Tree-t a MaterialApp-pal gyökérként.

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

Ebben a példában a MaterialApp konfigurál egy alaptémát (világos és sötét), címet és főképernyőt. A title paraméter az ablak címéhez (asztali gépen) és a hozzáférhetőséghez használatos. A theme és darkTheme paraméterek határozzák meg az alkalmazás megjelenését különböző módokban.

A MaterialApp felépítése és paraméterei

MaterialApp több mint 30 paramétert fogad el, amelyek kategóriákra oszthatók: Material Design beállítások, útválasztás, témázás, lokalizáció, hiba viselkedés és specifikus platformok beállításai. A kulcsfontosságú paraméterek ismerete lehetővé teszi az alkalmazás rugalmas konfigurálását további kód írása nélkül.

Fő konfigurációs paraméterek

A title paraméter beállítja az alkalmazás nevét az ablak címéhez és a hozzáférhetőséghez. A color meghatározza az alkalmazás színét a feladatváltóhoz Androidon. A debugShowCheckedModeBanner elrejti a hibakeresési mód szalagcímét a kiadási build-ben. A showPerformanceOverlay bekapcsolja a teljesítményinformációkkal ellátott átfedést. A supportDarkTheme jelzi, hogy az alkalmazás támogatja-e a sötét témát.

Specifikus platformok paraméterei

MaterialApp paramétereket biztosít a viselkedés konfigurálásához különböző platformokon: restorationScopeId az alkalmazás állapotának mentéséhez újraindításkor Androidon, scrollBehavior a görgetési viselkedés konfigurálásához különböző operációs rendszereken, useMaterial3 a Material 3 (Material You) bekapcsolásához. A Material 3 dinamikus színeket, új komponenseket és frissített stílusokat ad hozzá.

Témázás a theme és darkTheme segítségével

Témázás — a MaterialApp egyik fő paramétere. A theme paraméter egy ThemeData objektumot fogad, amely meghatározza a színpalettát, tipográfiát, komponens alakzatokat és ikonográfiát a világos témához. A darkTheme paraméter — hasonló konfiguráció a sötét témához. A Flutter automatikusan vált a témák között az eszköz rendszerbeállításaitól függően.

ThemeData: színséma

ThemeData tartalmazza a primarySwatch (elsődleges szín), colorScheme (kiterjesztett Material 3 színséma), brightness (világos vagy sötét), fontFamily (alapértelmezett betűtípus), textTheme (szöveg stílusok), cardTheme, appBarTheme, buttonTheme és több tucat más paramétert a specifikus komponensek konfigurálásához. Használja a colorScheme-t Material 3-hoz és a primarySwatch-ot Material 2-höz.

Material 3 dinamikus színek

A Material 3 (Material You) támogatja a dinamikus színeket, amelyek az eszköz háttérképéből származnak Android 12+-on. A bekapcsoláshoz állítsa be a useMaterial3: true értéket, és használja a colorScheme.fromSeed vagy colorScheme.fromImageProvider függvényt. A dinamikus színek automatikusan harmonikus palettát generálnak 5 tónusból: primary, secondary, tertiary, neutral és neutralVariant.

Téma elérése a widgetekben

Bármely widget elérheti az aktuális témát a Theme.of(context) segítségével. A Theme.of egy ThemeData objektumot ad vissza, amelyből a colors, textTheme és más paraméterek lekérhetők. A téma változásainak figyeléséhez (például világos és sötét között váltáskor) használja a kontextust a build metóduson belül — a Flutter automatikusan újraépíti a widgetet a téma változásakor.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Témázott szöveg példa",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Ebben a példában a Theme.of(context) lekéri az aktuális témát a legközelebbi MaterialApp-ből. A háttérszín és a szöveg stílusa automatikusan megfelel az aktuális témának (világos vagy sötét). A téma váltásakor a Container és a Text újraépül a frissített ThemeData új értékeivel.

Útválasztás és navigáció a MaterialApp-ben

MaterialApp integrálja a Navigator-t — egy verem alapú navigátort, amely kezeli a képernyők közötti átmeneteket. Az initialRoute, routes és onGenerateRoute paraméterek határozzák meg, hogy a Flutter hogyan kezeli a navigációt. A Navigator.push és Navigator.pushReplacement programozott képernyőváltást tesz lehetővé, a Navigator.pop pedig visszalépést az előző képernyőre.

Elnevezett útvonalak (routes)

A routes paraméter Map típust fogad, ahol a kulcs az útvonal neve (karakterlánc), az érték pedig egy függvény, amely létrehozza a widgetet a képernyőhöz. Az elnevezett útvonalak kényelmesek a statikus navigációhoz: '/' (gyökér útvonal) általában a home-nak felel meg, '/settings', '/profile' — más képernyők. A Navigator.pushNamed(context, '/settings') a beállítások képernyőre navigál.

Útvonal generálás (onGenerateRoute)

onGenerateRoute — egy függvény, amely akkor hívódik meg, ha az útvonal nem található a routes-ban. RouteSettings-t fogad és MaterialPageRoute-ot ad vissza. Ez a megközelítés hasznos a dinamikus navigációhoz, amikor az útvonalak adatoktól függnek (például /user/42). Az onGenerateRoute elemzi az útvonal nevét, kinyeri a paramétereket és létrehozza a megfelelő képernyőt.

Mély linkek és named routing

A mély linkek (deep links) támogatásához használja együtt az onGenerateInitialRoute és onGenerateRoute paramétereket. A mély linkek lehetővé teszik az alkalmazás egy adott képernyőjének megnyitását URL-en keresztül (például https://example.com/promo). A Flutter kezeli a mély linkeket Androidon (intent filters segítségével) és iOS-en (universal links segítségével), és továbbítja az útvonalat az onGenerateRoute-nak.

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

Ebben a példában az onGenerateRoute a /user/42 formátumú dinamikus útvonalakat kezeli. Ha az útvonal nem található a statikus routes-ban és nem egyezik a dinamikus mintával, a Flutter egy hibaoldalt jelenít meg, amely az onUnknownRoute segítségével konfigurálható.

Lokalizáció és internacionalizáció

MaterialApp beépített támogatást nyújt a lokalizációhoz a localizationsDelegates és supportedLocales paramétereken keresztül. A LocalizationsDelegates betölti a lokalizált karakterláncokat, a supportedLocales pedig meghatározza, hogy az alkalmazás milyen nyelveket támogat. A Flutter automatikusan érzékeli az eszköz nyelvét és betölti a megfelelő lokalizált erőforrásokat.

A supportedLocales és localizationsDelegates konfigurálása

A supportedLocales paraméter az alkalmazás által támogatott Locale-ok listáját fogadja: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — a lokalizált karakterláncokat betöltő delegáltak listája. Material Design esetén adja hozzá a GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate és GlobalCupertinoLocalizations.delegate elemeket.

Alkalmazás karakterláncok lokalizációja

Saját karakterláncok lokalizálásához használja a AppLocalizations osztályt, amely a flutter_localizations vagy az intl csomagon keresztül jön létre. Az AppLocalizations statikus metódusokat biztosít a lokalizált karakterláncok eléréséhez: AppLocalizations.of(context)!.helloMessage. A MaterialApp automatikusan továbbítja a Localizations-t a Widget Tree-be, elérhetővé téve azokat a kontextuson keresztül.

• flutter_localizations — a hivatalos csomag a Material widgetek és rendszer karakterláncok lokalizálásához.
• intl — internacionalizációs csomag: számok, dátumok, pénznemek formázása és pluralizáció.
• ARB fájlok — a lokalizált karakterláncok tárolási formátuma, amelyet a flutter_localizations és az intl használ.

MaterialApp vs CupertinoApp vs WidgetsApp

A Flutter három gyökér widgetet biztosít különböző platformokhoz: MaterialApp (Material Design Androidhoz és webhez), CupertinoApp (iOS stílus) és WidgetsApp (alap widget stílus nélkül). A gyökér widget kiválasztása meghatározza a teljes alkalmazás megjelenését és a platform komponensek elérhetőségét.

MaterialApp: univerzális választás

MaterialApp a legtöbb alkalmazáshoz alkalmas a Material Design támogatásának köszönhetően, amely jól néz ki Androidon, weben és asztali gépen. A Material Design gazdag komponenskönyvtárat biztosít: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog és sok más. A MaterialApp támogatja a Material 3-at dinamikus színekkel is.

CupertinoApp: iOS stílus

CupertinoApp a Cupertino Design-t használja az Apple Human Interface Guidelines szerint. CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar és más iOS stílusú komponenseket biztosít. Használja a CupertinoApp-ot iOS alkalmazásokhoz vagy olyan alkalmazásokhoz, amelyek az Apple stílust követik minden platformon.

WidgetsApp: minimális gyökér

WidgetsApp — egy alap gyökér widget stílus nélkül. Hozzáadja a Navigator, MediaQuery és Localizations elemeket, de nem biztosít témákat vagy Material/Cupertino komponenseket. A WidgetsApp alkalmas egyedi design rendszerekhez, játékokhoz vagy saját stílussal rendelkező alkalmazásokhoz, ahol a Material vagy Cupertino felesleges.