MaterialApp — какво е, конфигурация и роля на кореновия уиджет

Какво е MaterialApp във Flutter?

MaterialApp — е уиджет-обвивка, който инициализира Material Design във Flutter приложение. Той е коренът на Widget Tree и предоставя на дъщерните уиджети достъп до системни услуги: навигация, тема, медийни заявки и локализация. Без MaterialApp приложението няма да има стандартен Material стил и няма да може да използва уиджети като Scaffold, AppBar, FloatingActionButton и BottomNavigationBar.

Какво добавя MaterialApp към Widget Tree

При използване на MaterialApp, Flutter автоматично добавя няколко ключови уиджета в корена на дървото: Navigator (стек от екрани за навигация), Theme (цветова схема и стилове), MediaQuery (информация за устройството), Localizations (локализирани низове), Directionality (посока на текста). Тези уиджети са имплементирани като InheritedWidget и са достъпни чрез BuildContext навсякъде в приложението.

Основна употреба

Минималната конфигурация на MaterialApp изисква само параметъра home — уиджетът, показван на главния екран. Flutter автоматично обвива home в Scaffold, ако не е Scaffold, чрез механизма WidgetsBinding. При стартиране на приложението с runApp(MaterialApp(home: MyHomePage())), Flutter създава кореново Widget Tree с MaterialApp като корен.

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

В този пример MaterialApp конфигурира основна тема (светла и тъмна), заглавие и главен екран. Параметърът title се използва за заглавие на прозореца (на десктоп) и за достъпност. Параметрите theme и darkTheme определят външния вид на приложението в различни режими.

Структура и параметри на MaterialApp

MaterialApp приема над 30 параметъра, които се разделят на категории: настройки на Material Design, маршрутизация, темизация, локализация, поведение при грешки и настройки за конкретни платформи. Познаването на ключовите параметри позволява гъвкаво конфигуриране на приложението без писане на допълнителен код.

Основни конфигурационни параметри

Параметърът title задава името на приложението за заглавието на прозореца и достъпността. color определя цвета на приложението за превключвателя на задачи на Android. debugShowCheckedModeBanner скрива банера за режим на отстраняване на грешки в версията за пускане. showPerformanceOverlay включва наслагване с информация за производителността. supportDarkTheme показва дали приложението поддържа тъмна тема.

Параметри за конкретни платформи

MaterialApp предоставя параметри за конфигуриране на поведението на различни платформи: restorationScopeId за запазване на състоянието на приложението при рестартиране на Android, scrollBehavior за конфигуриране на поведението при превъртане на различни операционни системи, useMaterial3 за включване на Material 3 (Material You). Material 3 добавя динамични цветове, нови компоненти и актуализирани стилове.

Темизация чрез theme и darkTheme

Темизация — един от основните параметри на MaterialApp. Параметърът theme приема обект ThemeData, който определя цветовата палитра, типографията, формите на компонентите и иконографията за светлата тема. Параметърът darkTheme — аналогична конфигурация за тъмната тема. Flutter автоматично превключва темата в зависимост от системните настройки на устройството.

ThemeData: цветова схема

ThemeData включва primarySwatch (основен цвят), colorScheme (разширена цветова схема Material 3), brightness (светъл или тъмен), fontFamily (шрифт по подразбиране), textTheme (стилове на текст), cardTheme, appBarTheme, buttonTheme и десетки други параметри за конфигуриране на конкретни компоненти. Използвайте colorScheme за Material 3 и primarySwatch за Material 2.

Динамични цветове на Material 3

Material 3 (Material You) поддържа динамични цветове, които се извличат от тапета на устройството на Android 12+. За активиране задайте useMaterial3: true и използвайте colorScheme.fromSeed или colorScheme.fromImageProvider. Динамичните цветове автоматично генерират хармонична палитра от 5 тона: primary, secondary, tertiary, neutral и neutralVariant.

Достъп до темата в уиджети

Всеки уиджет може да получи достъп до текущата тема чрез Theme.of(context). Theme.of връща ThemeData, от който могат да се получат colors, textTheme и други параметри. За абониране за промени на темата (например при превключване между светла и тъмна), използвайте контекста вътре в метода build — Flutter автоматично преизгражда уиджета при промяна на темата.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Пример за тематизиран текст",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

В този пример Theme.of(context) получава текущата тема от най-близкия MaterialApp. Цветът на фона и стилът на текста автоматично съответстват на текущата тема (светла или тъмна). При превключване на темата Container и Text се преизграждат с нови стойности от актуализирания ThemeData.

Маршрутизация и навигация в MaterialApp

MaterialApp интегрира Navigator — стеков навигатор, който управлява преходите между екраните. Параметрите initialRoute, routes и onGenerateRoute определят как Flutter обработва навигацията. Navigator.push и Navigator.pushReplacement позволяват програмно превключване на екрани, а Navigator.pop — връщане назад.

Именувани маршрути (routes)

Параметърът routes приема Map, където ключът е името на маршрута (низ), а стойността е функция, създаваща уиджета за екрана. Именуваните маршрути са удобни за статична навигация: '/' (коренов маршрут) обикновено съответства на home, '/settings', '/profile' — други екрани. Navigator.pushNamed(context, '/settings') навигира до екрана с настройки.

Генериране на маршрути (onGenerateRoute)

onGenerateRoute — е функция, която се извиква, когато маршрутът не е намерен в routes. Тя приема RouteSettings и връща MaterialPageRoute. Този подход е полезен за динамична навигация, когато маршрутите зависят от данни (например /user/42). onGenerateRoute анализира името на маршрута, извлича параметри и създава съответния екран.

Дълбоки връзки и named routing

За поддръжка на дълбоки връзки (deep links) използвайте параметрите onGenerateInitialRoute и onGenerateRoute заедно. Дълбоките връзки позволяват отваряне на определен екран на приложението чрез URL (например https://example.com/promo). Flutter обработва дълбоки връзки на Android (чрез intent filters) и iOS (чрез universal links) и предава пътя на 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;
  },
)

В този пример onGenerateRoute обработва динамични маршрути във формат /user/42. Ако маршрутът не бъде намерен в статичните routes и не съответства на динамичния модел, Flutter показва страница за грешка, която може да бъде конфигурирана чрез onUnknownRoute.

Локализация и интернационализация

MaterialApp предоставя вградена поддръжка за локализация чрез параметрите localizationsDelegates и supportedLocales. LocalizationsDelegates зареждат локализирани низове, а supportedLocales определя кои езици поддържа приложението. Flutter автоматично открива езика на устройството и зарежда съответните локализирани ресурси.

Конфигуриране на supportedLocales и localizationsDelegates

Параметърът supportedLocales приема списък от Locale, които приложението поддържа: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — списък от делегати, зареждащи локализирани низове. За Material Design добавете GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate и GlobalCupertinoLocalizations.delegate.

Локализация на низове на приложението

За локализация на собствени низове използвайте класа AppLocalizations, създаден чрез flutter_localizations или пакета intl. AppLocalizations предоставя статични методи за достъп до локализирани низове: AppLocalizations.of(context)!.helloMessage. MaterialApp автоматично предава Localizations на Widget Tree, правейки ги достъпни чрез контекст.

• flutter_localizations — официалният пакет за локализация на Material уиджети и системни низове.
• intl — пакет за интернационализация: форматиране на числа, дати, валути и плурализация.
• ARB файлове — формат за съхранение на локализирани низове, използван от flutter_localizations и intl.

MaterialApp срещу CupertinoApp срещу WidgetsApp

Flutter предоставя три коренови уиджета за различни платформи: MaterialApp (Material Design за Android и уеб), CupertinoApp (iOS стил) и WidgetsApp (основен уиджет без стилизиране). Изборът на коренов уиджет определя външния вид на цялото приложение и наличието на платформени компоненти.

MaterialApp: универсален избор

MaterialApp е подходящ за повечето приложения благодарение на поддръжката на Material Design, който изглежда добре на Android, уеб и десктоп. Material Design предоставя богата библиотека от компоненти: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog и много други. MaterialApp също поддържа Material 3 с динамични цветове.

CupertinoApp: iOS стил

CupertinoApp използва Cupertino Design в съответствие с Human Interface Guidelines на Apple. Той предоставя CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar и други компоненти в iOS стил. Използвайте CupertinoApp за iOS приложения или приложения, следващи стила на Apple на всички платформи.

WidgetsApp: минимален корен

WidgetsApp — е основен коренов уиджет без стилизиране. Той добавя Navigator, MediaQuery и Localizations, но не предоставя теми или Material/Cupertino компоненти. WidgetsApp е подходящ за персонализирани дизайн системи, игри или приложения със собствено стилизиране, където Material или Cupertino са излишни.