MaterialApp — ano ito, configuration at papel ng root widget

Ano ang MaterialApp sa Flutter?

MaterialApp — ay isang wrapper widget na nagpapasimula ng Material Design sa Flutter application. Ito ang ugat ng Widget Tree at nagbibigay sa child widgets ng access sa system services: navigation, theme, media queries at localization. Kung walang MaterialApp, ang application ay walang standard na Material style at hindi magagamit ang mga widget tulad ng Scaffold, AppBar, FloatingActionButton at BottomNavigationBar.

Ano ang idinadagdag ng MaterialApp sa Widget Tree

Kapag ginagamit ang MaterialApp, awtomatikong nagdaragdag ang Flutter ng ilang key widget sa ugat ng tree: Navigator (stack ng screen para sa navigation), Theme (color scheme at style), MediaQuery(impormasyon ng device), Localizations (localized strings), Directionality (direksyon ng text). Ang mga widget na ito ay ipinatutupad bilang InheritedWidget at accessible sa pamamagitan ng BuildContext sa kahit saang bahagi ng application.

Pangunahing paggamit

Ang minimal na configuration ng MaterialApp ay nangangailangan lamang ng parameter na home — ang widget na ipinapakita sa main screen. Awtomatikong binalot ng Flutter ang home sa Scaffold, kung hindi ito Scaffold, sa pamamagitan ng WidgetsBinding mechanism. Kapag inilunsad ang application na may runApp(MaterialApp(home: MyHomePage())), gumagawa ang Flutter ng root Widget Tree na may MaterialApp bilang ugat.

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

Sa halimbawang ito, MaterialApp ay nagko-configure ng basic theme (light at dark), title at main screen. Ang parameter na title ay ginagamit para sa window title (sa desktop) at para sa accessibility. Ang mga parameter na theme at darkTheme ay tumutukoy sa itsura ng application sa iba't ibang mode.

Structure at parameter ng MaterialApp

MaterialApp ay tumatanggap ng higit sa 30 parameter, na nahahati sa mga kategorya: Material Design setting, routing, theming, localization, error behavior at setting para sa mga specific platform. Ang pag-alam sa mga key parameter ay nagbibigay-daan sa flexible configuration ng application nang hindi nagsusulat ng karagdagang code.

Pangunahing configuration parameter

Ang parameter na title ay nagtatakda ng pangalan ng application para sa window title at accessibility. color ay tumutukoy sa kulay ng application para sa task switcher sa Android. debugShowCheckedModeBanner ay nagtatago ng debug mode banner sa release build. showPerformanceOverlay ay nagpapagana ng overlay na may impormasyon ng performance. supportDarkTheme ay nagpapahiwatig kung ang application ay sumusuporta sa dark theme.

Parameter para sa specific platform

MaterialApp ay nagbibigay ng parameter para sa pag-configure ng behavior sa iba't ibang platform: restorationScopeId para sa pag-save ng state ng application sa restart sa Android, scrollBehavior para sa pag-configure ng scroll behavior sa iba't ibang operating system, useMaterial3 para sa pagpapagana ng Material 3 (Material You). Ang Material 3 ay nagdaragdag ng dynamic colors, bagong component at updated style.

Theming sa pamamagitan ng theme at darkTheme

Theming — isa sa mga pangunahing parameter ng MaterialApp. Ang parameter na theme ay tumatanggap ng ThemeData object na tumutukoy sa color palette, typography, component shapes at iconography para sa light theme. Ang parameter na darkTheme — analogous configuration para sa dark theme. Awtomatikong nagpapalit ang Flutter ng theme batay sa system setting ng device.

ThemeData: color scheme

ThemeData ay may kasamang primarySwatch (primary color), colorScheme (extended color scheme Material 3), brightness (light o dark), fontFamily (default font), textTheme (text style), cardTheme, appBarTheme, buttonTheme at dose-dosenang iba pang parameter para sa pag-configure ng mga specific component. Gamitin ang colorScheme para sa Material 3 at primarySwatch para sa Material 2.

Dynamic colors ng Material 3

Ang Material 3 (Material You) ay sumusuporta sa dynamic colors, na kinukuha mula sa wallpaper ng device sa Android 12+. Para paganahin, itakda ang useMaterial3: true at gamitin ang colorScheme.fromSeed o colorScheme.fromImageProvider. Awtomatikong bumubuo ang dynamic colors ng harmonious palette mula sa 5 tono: primary, secondary, tertiary, neutral at neutralVariant.

Access sa theme sa widgets

Anumang widget ay maaaring mag-access sa kasalukuyang theme sa pamamagitan ng Theme.of(context). Ang Theme.of ay nagbabalik ng ThemeData, kung saan maaaring makuha ang colors, textTheme at iba pang parameter. Para mag-subscribe sa mga pagbabago ng theme (halimbawa, kapag nagpapalit sa pagitan ng light at dark), gamitin ang context sa loob ng build method — awtomatikong itinatayo muli ng Flutter ang widget kapag nagbago ang theme.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Halimbawa ng may temang teksto",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Sa halimbawang ito, Theme.of(context) ay kumukuha ng kasalukuyang theme mula sa pinakamalapit na MaterialApp. Ang background color at text style ay awtomatikong tumutugma sa kasalukuyang theme (light o dark). Kapag nagpalit ng theme, ang Container at Text ay itinatayo muli gamit ang bagong value mula sa updated na ThemeData.

Routing at navigation sa MaterialApp

MaterialApp ay nag-i-integrate ng Navigator — isang stack navigator na namamahala ng mga transition sa pagitan ng screen. Ang mga parameter na initialRoute, routes at onGenerateRoute ay tumutukoy kung paano pinoproseso ng Flutter ang navigation. Ang Navigator.push at Navigator.pushReplacement ay nagbibigay-daan sa programmatic na pagpapalit ng screen, at Navigator.pop — pagbabalik sa nakaraang screen.

Named routes (routes)

Ang parameter na routes ay tumatanggap ng Map, kung saan ang key ay pangalan ng route (string), at ang value ay function na gumagawa ng widget para sa screen. Ang named routes ay maginhawa para sa static navigation: '/' (root route) ay karaniwang tumutugma sa home, '/settings', '/profile' — iba pang screen. Ang Navigator.pushNamed(context, '/settings') ay nag-navigate sa settings screen.

Pagbuo ng route (onGenerateRoute)

onGenerateRoute — ay isang function na tinatawag kapag ang route ay hindi natagpuan sa routes. Ito ay tumatanggap ng RouteSettings at nagbabalik ng MaterialPageRoute. Ang approach na ito ay kapaki-pakinabang para sa dynamic navigation, kapag ang routes ay nakadepende sa data (halimbawa, /user/42). Ang onGenerateRoute ay nag-parse ng route name, nag-extract ng parameter at gumagawa ng kaukulang screen.

Deep links at named routing

Para sa suporta ng deep links, gamitin ang mga parameter na onGenerateInitialRoute at onGenerateRoute nang magkasama. Ang deep links ay nagbibigay-daan sa pagbukas ng specific screen ng application sa pamamagitan ng URL (halimbawa, https://example.com/promo). Pinoproseso ng Flutter ang deep links sa Android (sa pamamagitan ng intent filters) at iOS (sa pamamagitan ng universal links) at ipinapasa ang path sa 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;
  },
)

Sa halimbawang ito, onGenerateRoute ay nagpoproseso ng dynamic routes na may format na /user/42. Kung ang route ay hindi natagpuan sa static routes at hindi tumutugma sa dynamic pattern, nagpapakita ang Flutter ng error page na maaaring i-configure sa pamamagitan ng onUnknownRoute.

Localization at internationalization

MaterialApp ay nagbibigay ng built-in na suporta para sa localization sa pamamagitan ng mga parameter na localizationsDelegates at supportedLocales. Ang LocalizationsDelegates ay naglo-load ng localized strings, at ang supportedLocales ay tumutukoy kung anong mga wika ang sinusuportahan ng application. Awtomatikong na-detect ng Flutter ang wika ng device at naglo-load ng kaukulang localized resources.

Configuration ng supportedLocales at localizationsDelegates

Ang parameter na supportedLocales ay tumatanggap ng listahan ng Locale na sinusuportahan ng application: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — listahan ng delegado na naglo-load ng localized strings. Para sa Material Design, idagdag ang GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate at GlobalCupertinoLocalizations.delegate.

Localization ng application strings

Para i-localize ang sarili mong strings, gamitin ang klase na AppLocalizations na ginawa sa pamamagitan ng flutter_localizations o intl package. Nagbibigay ang AppLocalizations ng static methods para ma-access ang localized strings: AppLocalizations.of(context)!.helloMessage. Awtomatikong ipinapasa ng MaterialApp ang Localizations sa Widget Tree, ginagawa itong accessible sa pamamagitan ng context.

• flutter_localizations — ang opisyal na package para sa localization ng Material widgets at system strings.
• intl — package para sa internationalization: pag-format ng numero, petsa, pera at pluralization.
• ARB files — storage format para sa localized strings na ginagamit ng flutter_localizations at intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Ang Flutter ay nagbibigay ng tatlong root widget para sa iba't ibang platform: MaterialApp (Material Design para sa Android at web), CupertinoApp (iOS style) at WidgetsApp (basic widget na walang styling). Ang pagpili ng root widget ay tumutukoy sa itsura ng buong application at availability ng platform components.

MaterialApp: universal choice

MaterialApp ay angkop para sa karamihan ng application dahil sa suporta ng Material Design na maganda sa Android, web at desktop. Ang Material Design ay nagbibigay ng mayamang library ng components: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog at marami pang iba. Ang MaterialApp ay sumusuporta rin sa Material 3 na may dynamic colors.

CupertinoApp: iOS style

CupertinoApp ay gumagamit ng Cupertino Design ayon sa Human Interface Guidelines ng Apple. Nagbibigay ito ng CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar at iba pang iOS-styled components. Gamitin ang CupertinoApp para sa iOS application o application na sumusunod sa Apple style sa lahat ng platform.

WidgetsApp: minimal root

WidgetsApp — ay isang basic root widget na walang styling. Nagdaragdag ito ng Navigator, MediaQuery at Localizations, ngunit hindi nagbibigay ng mga theme o Material/Cupertino components. Ang WidgetsApp ay angkop para sa custom design system, laro o application na may sariling styling kung saan ang Material o Cupertino ay sobra.