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 используется для заголовка окна (на desktop) и для accessibility. Параметры theme и darkTheme определяют внешний вид приложения в разных режимах.

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

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

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

Параметр title задаёт название приложения для заголовка окна и accessibility. color определяет цвет приложения для task switcher на Android. debugShowCheckedModeBanner скрывает баннер debug-режима в релизной сборке. 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(
    "Themed text example",
    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 vs CupertinoApp vs WidgetsApp

Flutter предоставляет три корневых виджета для разных платформ: MaterialApp (Material Design для Android и веба), CupertinoApp (iOS-стиль) и WidgetsApp (базовый виджет без стилизации). Выбор корневого виджета определяет внешний вид всего приложения и доступность платформенных компонентов.

MaterialApp: универсальный выбор

MaterialApp подходит для большинства приложений благодаря поддержке Material Design, который хорошо выглядит на Android, вебе и desktop. 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 избыточен.