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 vs CupertinoApp vs 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 сувишан.