MaterialApp — co to je, konfigurace a role kořenového widgetu

Co je MaterialApp ve Flutteru?

MaterialApp — je obalový widget, který inicializuje Material Design ve Flutter aplikaci. Je kořenem Widget Tree a poskytuje podřízeným widgetům přístup k systémovým službám: navigaci, tématům, mediálním dotazům a lokalizaci. Bez MaterialApp aplikace nebude mít standardní Material styl a nebude moci používat widgety jako Scaffold, AppBar, FloatingActionButton a BottomNavigationBar.

Co MaterialApp přidává do Widget Tree

Při použití MaterialApp Flutter automaticky přidá několik klíčových widgetů do kořene stromu: Navigator (zásobník obrazovek pro navigaci), Theme (barevné schéma a styly), MediaQuery (informace o zařízení), Localizations (lokalizované řetězce), Directionality (směr textu). Tyto widgety jsou implementovány jako InheritedWidget a jsou přístupné přes BuildContext kdekoli v aplikaci.

Základní použití

Minimální konfigurace MaterialApp vyžaduje pouze parametr home — widget zobrazený na hlavní obrazovce. Flutter automaticky zabalí home do Scaffold, pokud není Scaffold, přes mechanismus WidgetsBinding. Při spuštění aplikace s runApp(MaterialApp(home: MyHomePage())) Flutter vytvoří kořenové Widget Tree s MaterialApp jako kořenem.

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

V tomto příkladu MaterialApp konfiguruje základní téma (světlé a tmavé), název a hlavní obrazovku. Parametr title se používá pro název okna (na desktopu) a pro přístupnost. Parametry theme a darkTheme určují vzhled aplikace v různých režimech.

Struktura a parametry MaterialApp

MaterialApp přijímá více než 30 parametrů, které se dělí do kategorií: nastavení Material Design, routování, témata, lokalizace, chování při chybách a nastavení pro specifické platformy. Znalost klíčových parametrů umožňuje flexibilní konfiguraci aplikace bez psaní dalšího kódu.

Hlavní konfigurační parametry

Parametr title nastavuje název aplikace pro název okna a přístupnost. color určuje barvu aplikace pro přepínač úloh na Androidu. debugShowCheckedModeBanner skrývá banner režimu ladění v release sestavení. showPerformanceOverlay zapíná překryv s informacemi o výkonu. supportDarkTheme indikuje, zda aplikace podporuje tmavé téma.

Parametry pro specifické platformy

MaterialApp poskytuje parametry pro konfiguraci chování na různých platformách: restorationScopeId pro ukládání stavu aplikace při restartu na Androidu, scrollBehavior pro konfiguraci chování posouvání na různých operačních systémech, useMaterial3 pro zapnutí Material 3 (Material You). Material 3 přidává dynamické barvy, nové komponenty a aktualizované styly.

Témata pomocí theme a darkTheme

Témata — jeden z hlavních parametrů MaterialApp. Parametr theme přijímá objekt ThemeData, který určuje barevnou paletu, typografii, tvary komponent a ikonografii pro světlé téma. Parametr darkTheme — analogická konfigurace pro tmavé téma. Flutter automaticky přepíná téma v závislosti na systémových nastaveních zařízení.

ThemeData: barevné schéma

ThemeData zahrnuje primarySwatch (hlavní barva), colorScheme (rozšířené barevné schéma Material 3), brightness (světlý nebo tmavý), fontFamily (výchozí font), textTheme (styly textu), cardTheme, appBarTheme, buttonTheme a desítky dalších parametrů pro konfiguraci specifických komponent. Používejte colorScheme pro Material 3 a primarySwatch pro Material 2.

Dynamické barvy Material 3

Material 3 (Material You) podporuje dynamické barvy, které jsou extrahovány z tapety zařízení na Android 12+. Pro zapnutí nastavte useMaterial3: true a používejte colorScheme.fromSeed nebo colorScheme.fromImageProvider. Dynamické barvy automaticky generují harmonickou paletu z 5 tónů: primary, secondary, tertiary, neutral a neutralVariant.

Přístup k tématu ve widgetech

Jakýkoli widget může získat přístup k aktuálnímu tématu přes Theme.of(context). Theme.of vrací ThemeData, ze kterého lze získat colors, textTheme a další parametry. Pro sledování změn tématu (například při přepínání mezi světlým a tmavým) používejte kontext uvnitř metody build — Flutter automaticky znovu sestaví widget při změně tématu.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Příklad tématického textu",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

V tomto příkladu Theme.of(context) získává aktuální téma z nejbližšího MaterialApp. Barva pozadí a styl textu automaticky odpovídají aktuálnímu tématu (světlému nebo tmavému). Při přepnutí tématu se Container a Text znovu sestaví s novými hodnotami z aktualizovaného ThemeData.

Routování a navigace v MaterialApp

MaterialApp integruje Navigator — zásobníkový navigátor, který spravuje přechody mezi obrazovkami. Parametry initialRoute, routes a onGenerateRoute určují, jak Flutter zpracovává navigaci. Navigator.push a Navigator.pushReplacement umožňují programové přepínání obrazovek a Navigator.pop — návrat zpět.

Pojmenované cesty (routes)

Parametr routes přijímá Map, kde klíč je název cesty (řetězec) a hodnota je funkce vytvářející widget pro obrazovku. Pojmenované cesty jsou vhodné pro statickou navigaci: '/' (kořenová cesta) obvykle odpovídá home, '/settings', '/profile' — další obrazovky. Navigator.pushNamed(context, '/settings') přechází na obrazovku nastavení.

Generování cest (onGenerateRoute)

onGenerateRoute — je funkce volaná, když cesta není nalezena v routes. Přijímá RouteSettings a vrací MaterialPageRoute. Tento přístup je užitečný pro dynamickou navigaci, když cesty závisí na datech (např. /user/42). onGenerateRoute analyzuje název cesty, extrahuje parametry a vytvoří odpovídající obrazovku.

Hluboké odkazy a pojmenované routování

Pro podporu hlubokých odkazů (deep links) používejte parametry onGenerateInitialRoute a onGenerateRoute společně. Hluboké odkazy umožňují otevřít určitou obrazovku aplikace pomocí URL (např. https://example.com/promo). Flutter zpracovává hluboké odkazy na Androidu (přes intent filters) a iOS (přes universal links) a předává cestu do 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;
  },
)

V tomto příkladu onGenerateRoute zpracovává dynamické cesty ve formátu /user/42. Pokud cesta není nalezena ve statických routes a neodpovídá dynamickému vzoru, Flutter zobrazí chybovou stránku, kterou lze nakonfigurovat pomocí onUnknownRoute.

Lokalizace a internacionalizace

MaterialApp poskytuje vestavěnou podporu pro lokalizaci pomocí parametrů localizationsDelegates a supportedLocales. LocalizationsDelegates načítají lokalizované řetězce a supportedLocales určuje, které jazyky aplikace podporuje. Flutter automaticky detekuje jazyk zařízení a načítá odpovídající lokalizované zdroje.

Konfigurace supportedLocales a localizationsDelegates

Parametr supportedLocales přijímá seznam Locale, které aplikace podporuje: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — seznam delegátů načítajících lokalizované řetězce. Pro Material Design přidejte GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate a GlobalCupertinoLocalizations.delegate.

Lokalizace řetězců aplikace

Pro lokalizaci vlastních řetězců použijte třídu AppLocalizations vytvořenou pomocí flutter_localizations nebo balíčku intl. AppLocalizations poskytuje statické metody pro přístup k lokalizovaným řetězcům: AppLocalizations.of(context)!.helloMessage. MaterialApp automaticky předává Localizations do Widget Tree, čímž je zpřístupňuje přes kontext.

• flutter_localizations — oficiální balíček pro lokalizaci Material widgetů a systémových řetězců.
• intl — balíček pro internacionalizaci: formátování čísel, dat, měn a pluralizace.
• SOUBORY ARB — formát ukládání lokalizovaných řetězců používaný flutter_localizations a intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter poskytuje tři kořenové widgety pro různé platformy: MaterialApp (Material Design pro Android a web), CupertinoApp (styl iOS) a WidgetsApp (základní widget bez stylování). Výběr kořenového widgetu určuje vzhled celé aplikace a dostupnost komponent platformy.

MaterialApp: univerzální volba

MaterialApp je vhodný pro většinu aplikací díky podpoře Material Design, který vypadá dobře na Androidu, webu a desktopu. Material Design poskytuje bohatou knihovnu komponent: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog a mnoho dalších. MaterialApp také podporuje Material 3 s dynamickými barvami.

CupertinoApp: styl iOS

CupertinoApp používá Cupertino Design podle Human Interface Guidelines od Apple. Poskytuje CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar a další komponenty ve stylu iOS. Použijte CupertinoApp pro iOS aplikace nebo aplikace dodržující styl Apple na všech platformách.

WidgetsApp: minimální kořen

WidgetsApp — je základní kořenový widget bez stylování. Přidává Navigator, MediaQuery a Localizations, ale neposkytuje témata nebo Material/Cupertino komponenty. WidgetsApp je vhodný pro vlastní designové systémy, hry nebo aplikace s vlastním stylováním, kde je Material nebo Cupertino nadbytečný.