MaterialApp — ce este, configurarea și rolul widgetului rădăcină

Ce este MaterialApp în Flutter?

MaterialApp — este un widget-wrapper care inițializează Material Design într-o aplicație Flutter. Este rădăcina Widget Tree și oferă widgeturilor copil acces la serviciile sistemului: navigare, temă, interogări media și localizare. Fără MaterialApp, aplicația nu va avea stilul standard Material și nu va putea utiliza widgeturi precum Scaffold, AppBar, FloatingActionButton și BottomNavigationBar.

Ce adaugă MaterialApp în Widget Tree

Când utilizați MaterialApp, Flutter adaugă automat mai multe widgeturi cheie în rădăcina arborelui: Navigator (stiva de ecrane pentru navigare), Theme (schema de culori și stiluri), MediaQuery (informații despre dispozitiv), Localizations (șiruri localizate), Directionality (direcția textului). Aceste widgeturi sunt implementate ca InheritedWidget și sunt accesibile prin BuildContext în orice loc al aplicației.

Utilizarea de bază

Configurația minimă a MaterialApp necesită doar parametrul home — widgetul afișat pe ecranul principal. Flutter împachetează automat home în Scaffold, dacă nu este deja un Scaffold, prin mecanismul WidgetsBinding. La lansarea aplicației cu runApp(MaterialApp(home: MyHomePage())), Flutter creează Widget Tree rădăcină cu MaterialApp ca rădăcină.

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

În acest exemplu, MaterialApp configurează o temă de bază (deschisă și întunecată), titlul și ecranul principal. Parametrul title este utilizat pentru titlul ferestrei (pe desktop) și pentru accesibilitate. Parametrii theme și darkTheme definesc aspectul aplicației în diferite moduri.

Structura și parametrii MaterialApp

MaterialApp acceptă peste 30 de parametri, care se împart în categorii: setări Material Design, rutare, tematică, localizare, comportament la erori și setări pentru platforme specifice. Cunoașterea parametrilor cheie permite configurarea flexibilă a aplicației fără a scrie cod suplimentar.

Parametrii principali de configurare

Parametrul title stabilește numele aplicației pentru titlul ferestrei și accesibilitate. color definește culoarea aplicației pentru comutatorul de sarcini pe Android. debugShowCheckedModeBanner ascunde bannerul modului de depanare în versiunea de lansare. showPerformanceOverlay activează suprapunerea cu informații de performanță. supportDarkTheme indică dacă aplicația suportă tema întunecată.

Parametrii pentru platforme specifice

MaterialApp oferă parametri pentru configurarea comportamentului pe diferite platforme: restorationScopeId pentru salvarea stării aplicației la repornire pe Android, scrollBehavior pentru configurarea comportamentului de derulare pe diferite sisteme de operare, useMaterial3 pentru activarea Material 3 (Material You). Material 3 adaugă culori dinamice, componente noi și stiluri actualizate.

Tematica prin theme și darkTheme

Tematica — unul dintre parametrii principali ai MaterialApp. Parametrul theme primește un obiect ThemeData care definește paleta de culori, tipografia, formele componentelor și iconografia pentru tema deschisă. Parametrul darkTheme — configurație similară pentru tema întunecată. Flutter comută automat tema în funcție de setările sistemului dispozitivului.

ThemeData: schema de culori

ThemeData include primarySwatch (culoarea principală), colorScheme (schema de culori extinsă Material 3), brightness (deschis sau întunecat), fontFamily (fontul implicit), textTheme (stilurile textului), cardTheme, appBarTheme, buttonTheme și zeci de alți parametri pentru configurarea componentelor specifice. Utilizați colorScheme pentru Material 3 și primarySwatch pentru Material 2.

Culorile dinamice Material 3

Material 3 (Material You) suportă culori dinamice, care sunt extrase din fundalul dispozitivului pe Android 12+. Pentru activare, setați useMaterial3: true și utilizați colorScheme.fromSeed sau colorScheme.fromImageProvider. Culorile dinamice generează automat o paletă armonioasă din 5 tonuri: primary, secondary, tertiary, neutral și neutralVariant.

Accesul la temă în widgeturi

Orice widget poate accesa tema curentă prin Theme.of(context). Theme.of returnează ThemeData, din care se pot obține colors, textTheme și alți parametri. Pentru a vă abona la modificările temei (de exemplu, la comutarea între deschis și întunecat), utilizați contextul în interiorul metodei build — Flutter reconstruiește automat widgetul la schimbarea temei.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Exemplu de text tematizat",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

În acest exemplu, Theme.of(context) obține tema curentă din cel mai apropiat MaterialApp. Culoarea de fundal și stilul textului corespund automat temei curente (deschisă sau întunecată). La comutarea temei, Container și Text se reconstruiesc cu valori noi din ThemeData actualizat.

Rutarea și navigarea în MaterialApp

MaterialApp integrează Navigator — un navigator bazat pe stivă care gestionează tranzițiile între ecrane. Parametrii initialRoute, routes și onGenerateRoute definesc modul în care Flutter procesează navigarea. Navigator.push și Navigator.pushReplacement permit comutarea programatică a ecranelor, iar Navigator.pop — revenirea la ecranul anterior.

Rute denumite (routes)

Parametrul routes primește Map, unde cheia este numele rutei (șir de caractere), iar valoarea este o funcție care creează widgetul pentru ecran. Rutele denumite sunt convenabile pentru navigarea statică: '/' (ruta rădăcină) corespunde de obicei home, '/settings', '/profile' — alte ecrane. Navigator.pushNamed(context, '/settings') navighează la ecranul de setări.

Generarea rutelor (onGenerateRoute)

onGenerateRoute — este o funcție apelată când ruta nu este găsită în routes. Primește RouteSettings și returnează MaterialPageRoute. Această abordare este utilă pentru navigarea dinamică, când rutele depind de date (de exemplu, /user/42). onGenerateRoute analizează numele rutei, extrage parametrii și creează ecranul corespunzător.

Linkuri profunde și rutare denumită

Pentru suportul linkurilor profunde (deep links), utilizați parametrii onGenerateInitialRoute și onGenerateRoute împreună. Linkurile profunde permit deschiderea unui ecran specific al aplicației printr-un URL (de exemplu, https://example.com/promo). Flutter procesează linkurile profunde pe Android (prin intent filters) și iOS (prin universal links) și transmite calea către 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;
  },
)

În acest exemplu, onGenerateRoute procesează rute dinamice de forma /user/42. Dacă ruta nu este găsită în routes statice și nu se potrivește cu modelul dinamic, Flutter afișează o pagină de eroare care poate fi configurată prin onUnknownRoute.

Localizare și internaționalizare

MaterialApp oferă suport încorporat pentru localizare prin parametrii localizationsDelegates și supportedLocales. LocalizationsDelegates încarcă șirurile localizate, iar supportedLocales definește ce limbi suportă aplicația. Flutter detectează automat limba dispozitivului și încarcă resursele localizate corespunzătoare.

Configurarea supportedLocales și localizationsDelegates

Parametrul supportedLocales primește o listă de Locale pe care aplicația le suportă: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — lista delegaților care încarcă șirurile localizate. Pentru Material Design, adăugați GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate și GlobalCupertinoLocalizations.delegate.

Localizarea șirurilor aplicației

Pentru localizarea propriilor șiruri, utilizați clasa AppLocalizations creată prin flutter_localizations sau pachetul intl. AppLocalizations oferă metode statice pentru accesarea șirurilor localizate: AppLocalizations.of(context)!.helloMessage. MaterialApp transmite automat Localizations în Widget Tree, făcându-le accesibile prin context.

• flutter_localizations — pachetul oficial pentru localizarea widgeturilor Material și a șirurilor sistemice.
• intl — pachet pentru internaționalizare: formatarea numerelor, datelor, valutelor și pluralizarea.
• Fișiere ARB — formatul de stocare a șirurilor localizate utilizat de flutter_localizations și intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter oferă trei widgeturi rădăcină pentru diferite platforme: MaterialApp (Material Design pentru Android și web), CupertinoApp (stil iOS) și WidgetsApp (widget de bază fără stilizare). Alegerea widgetului rădăcină determină aspectul întregii aplicații și disponibilitatea componentelor platformei.

MaterialApp: alegerea universală

MaterialApp este potrivit pentru majoritatea aplicațiilor datorită suportului Material Design, care arată bine pe Android, web și desktop. Material Design oferă o bibliotecă bogată de componente: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog și multe altele. MaterialApp suportă și Material 3 cu culori dinamice.

CupertinoApp: stil iOS

CupertinoApp utilizează Cupertino Design conform Human Interface Guidelines de la Apple. Oferă CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar și alte componente stilizate iOS. Utilizați CupertinoApp pentru aplicații iOS sau aplicații care urmează stilul Apple pe toate platformele.

WidgetsApp: rădăcina minimă

WidgetsApp — este un widget rădăcină de bază fără stilizare. Adaugă Navigator, MediaQuery și Localizations, dar nu oferă teme sau componente Material/Cupertino. WidgetsApp este potrivit pentru sisteme de design personalizate, jocuri sau aplicații cu propria stilizare, unde Material sau Cupertino este de prisos.