MaterialApp — bu nədir, konfiqurasiya və kök vidjetin rolu

Flutter-də MaterialApp nədir?

MaterialApp — Flutter tətbiqində Material Design-i işə salan sarğıcı vidjetdir. O, Widget Tree-nin köküdür və uşaq vidjetlərə sistem xidmətlərinə çıxış imkanı verir: naviqasiya, tema, media sorğuları və lokallaşdırma. MaterialApp olmadan tətbiq standart Material stilinə malik olmayacaq və Scaffold, AppBar, FloatingActionButton və BottomNavigationBar kimi vidjetlərdən istifadə edə bilməyəcək.

MaterialApp Widget Tree-ə nə əlavə edir

MaterialApp istifadə edərkən Flutter avtomatik olaraq ağacın kökünə bir neçə əsas vidjet əlavə edir: Navigator (naviqasiya üçün ekran yığını), Theme (rəng sxemi və stillər), MediaQuery (cihaz haqqında məlumat), Localizations (lokallaşdırılmış sətirlər), Directionality (mətn istiqaməti). Bu vidjetlər InheritedWidget kimi tətbiq edilir və tətbiqin istənilən yerində BuildContext vasitəsilə əlçatandır.

Əsas istifadə

MaterialApp-in minimal konfiqurasiyası yalnız home parametrini tələb edir — əsas ekranda göstərilən vidjet. Flutter, WidgetsBinding mexanizmi vasitəsilə home-u Scaffold deyilsə, avtomatik olaraq Scaffold-a sarır. Tətbiq runApp(MaterialApp(home: MyHomePage())) ilə işə salındıqda Flutter MaterialApp-i kök olaraq əsas Widget Tree yaradır.

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

Bu nümunədə MaterialApp əsas temanı (açıq və qaranlıq), başlığı və əsas ekranı konfiqurasiya edir. title parametri pəncərə başlığı (desktopda) və əlçatanlıq üçün istifadə olunur. theme və darkTheme parametrləri müxtəlif rejimlərdə tətbiqin görünüşünü təyin edir.

MaterialApp-in strukturu və parametrləri

MaterialApp 30-dan çox parametr qəbul edir, bunlar kateqoriyalara bölünür: Material Design parametrləri, marşrutlaşdırma, temizasiya, lokallaşdırma, xəta davranışı və xüsusi platformalar üçün parametrlər. Əsas parametrləri bilmək əlavə kod yazmadan tətbiqi çevik konfiqurasiya etməyə imkan verir.

Əsas konfiqurasiya parametrləri

title parametri tətbiqin adını pəncərə başlığı və əlçatanlıq üçün təyin edir. color Android-də tapşırıq dəyişdiricisi üçün tətbiq rəngini müəyyən edir. debugShowCheckedModeBanner buraxılış quruluşunda debug rejimi bannerini gizlədir. showPerformanceOverlay performans məlumatı olan örtüyü aktivləşdirir. supportDarkTheme tətbiqin qaranlıq temanı dəstəklədiyini göstərir.

Xüsusi platformalar üçün parametrlər

MaterialApp müxtəlif platformalarda davranışı konfiqurasiya etmək üçün parametrlər təqdim edir: restorationScopeId Android-də yenidən başlatma zamanı tətbiq vəziyyətini saxlamaq üçün, scrollBehavior müxtəlif əməliyyat sistemlərində sürüşdürmə davranışını konfiqurasiya etmək üçün, useMaterial3 Material 3-ü (Material You) aktivləşdirmək üçün. Material 3 dinamik rənglər, yeni komponentlər və yenilənmiş stillər əlavə edir.

theme və darkTheme ilə temizasiya

Temizasiya — MaterialApp-in əsas parametrlərindən biridir. theme parametri açıq tema üçün rəng palitrasını, tipoqrafiyanı, komponent formalarını və işarələri müəyyən edən ThemeData obyektini qəbul edir. darkTheme parametri — qaranlıq tema üçün analoji konfiqurasiyadır. Flutter cihazın sistem parametrlərindən asılı olaraq avtomatik temanı dəyişir.

ThemeData: rəng sxemi

ThemeData primarySwatch (əsas rəng), colorScheme (Material 3 genişləndirilmiş rəng sxemi), brightness (açıq və ya qaranlıq), fontFamily (standart şrift), textTheme (mətn stilləri), cardTheme, appBarTheme, buttonTheme və xüsusi komponentləri konfiqurasiya etmək üçün onlarla digər parametrləri ehtiva edir. Material 3 üçün colorScheme, Material 2 üçün primarySwatch istifadə edin.

Material 3 dinamik rəngləri

Material 3 (Material You) Android 12+-da cihazın divar kağızından çıxarılan dinamik rəngləri dəstəkləyir. Aktivləşdirmək üçün useMaterial3: true təyin edin və colorScheme.fromSeed və ya colorScheme.fromImageProvider istifadə edin. Dinamik rənglər avtomatik olaraq 5 tondan ibarət harmonik palitra yaradır: primary, secondary, tertiary, neutral və neutralVariant.

Vidjetlərdə temaya çıxış

İstənilən vidjet cari temaya Theme.of(context) vasitəsilə çıxış əldə edə bilər. Theme.of colors, textTheme və digər parametrləri əldə etmək mümkün olan ThemeData qaytarır. Tema dəyişikliklərinə abunə olmaq üçün (məsələn, açıq və qaranlıq arasında keçid zamanı) build metodu daxilində kontekstdən istifadə edin — Flutter tema dəyişdikdə vidjeti avtomatik yenidən qurar.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Mövzulu mətn nümunəsi",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Bu nümunədə Theme.of(context) ən yaxın MaterialApp-dən cari temanı əldə edir. Fon rəngi və mətn stili avtomatik olaraq cari temaya (açıq və ya qaranlıq) uyğun gəlir. Tema dəyişdirildikdə Container və Text yenilənmiş ThemeData-dan yeni dəyərlərlə yenidən qurulur.

MaterialApp-də marşrutlaşdırma və naviqasiya

MaterialApp ekranlar arasında keçidləri idarə edən yığın naviqatoru Navigator-u inteqrasiya edir. initialRoute, routes və onGenerateRoute parametrləri Flutter-in naviqasiyanı necə idarə etdiyini müəyyən edir. Navigator.push və Navigator.pushReplacement proqramlı olaraq ekranları dəyişməyə, Navigator.pop isə geri qayıtmağa imkan verir.

Adlandırılmış marşrutlar (routes)

routes parametri Map qəbul edir, burada açar marşrutun adıdır (sətir), dəyər isə ekran üçün vidjet yaradan funksiyadır. Adlandırılmış marşrutlar statik naviqasiya üçün əlverişlidir: '/' (kök marşrut) adətən home-a uyğun gəlir, '/settings', '/profile' — digər ekranlar. Navigator.pushNamed(context, '/settings') parametrlər ekranına keçir.

Marşrutların yaradılması (onGenerateRoute)

onGenerateRoute — marşrut routes-də tapılmadıqda çağırılan funksiyadır. O, RouteSettings qəbul edir və MaterialPageRoute qaytarır. Bu yanaşma marşrutların məlumatlardan asılı olduğu dinamik naviqasiya üçün faydalıdır (məsələn, /user/42). onGenerateRoute marşrut adını təhlil edir, parametrləri çıxarır və müvafiq ekranı yaradır.

Dərin keçidlər və named routing

Dərin keçidləri (deep links) dəstəkləmək üçün onGenerateInitialRoute və onGenerateRoute parametrlərini birlikdə istifadə edin. Dərin keçidlər URL vasitəsilə tətbiqin müəyyən ekranını açmağa imkan verir (məsələn, https://example.com/promo). Flutter Android-də (intent filters vasitəsilə) və iOS-də (universal links vasitəsilə) dərin keçidləri idarə edir və yolu onGenerateRoute-a ötürür.

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

Bu nümunədə onGenerateRoute /user/42 formatında dinamik marşrutları idarə edir. Əgər marşrut statik routes-də tapılmazsa və dinamik nümunəyə uyğun gəlməzsə, Flutter onUnknownRoute vasitəsilə konfiqurasiya edilə bilən xəta səhifəsini göstərir.

Lokallaşdırma və beynəlmiləlləşdirmə

MaterialApp localizationsDelegates və supportedLocales parametrləri vasitəsilə daxili lokallaşdırma dəstəyi təmin edir. LocalizationsDelegates lokallaşdırılmış sətirləri yükləyir, supportedLocales isə tətbiqin hansı dilləri dəstəklədiyini müəyyən edir. Flutter avtomatik olaraq cihazın dilini aşkarlayır və müvafiq lokallaşdırılmış resursları yükləyir.

supportedLocales və localizationsDelegates konfiqurasiyası

supportedLocales parametri tətbiqin dəstəklədiyi Locale siyahısını qəbul edir: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — lokallaşdırılmış sətirləri yükləyən nümayəndələrin siyahısı. Material Design üçün GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate və GlobalCupertinoLocalizations.delegate əlavə edin.

Tətbiq sətirlərinin lokallaşdırılması

Öz sətirlərinizi lokallaşdırmaq üçün flutter_localizations və ya intl paketi vasitəsilə yaradılmış AppLocalizations sinifindən istifadə edin. AppLocalizations lokallaşdırılmış sətirlərə çıxış üçün statik metodlar təqdim edir: AppLocalizations.of(context)!.helloMessage. MaterialApp avtomatik olaraq Localizations-i Widget Tree-ə ötürərək onları kontekst vasitəsilə əlçatan edir.

• flutter_localizations — Material vidjetləri və sistem sətirlərinin lokallaşdırılması üçün rəsmi paket.
• intl — beynəlmiləlləşdirmə paketi: nömrələrin, tarixlərin, valyutaların formatlaşdırılması və pluralizasiya.
• ARB faylları — flutter_localizations və intl tərəfindən istifadə olunan lokallaşdırılmış sətirlərin saxlanma formatı.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter müxtəlif platformalar üçün üç kök vidjet təqdim edir: MaterialApp (Android və veb üçün Material Design), CupertinoApp (iOS stili) və WidgetsApp (stilləşdirməsiz əsas vidjet). Kök vidjetin seçimi bütün tətbiqin görünüşünü və platforma komponentlərinin əlçatanlığını müəyyən edir.

MaterialApp: universal seçim

MaterialApp Android, veb və desktop-da yaxşı görünən Material Design dəstəyi sayəsində əksər tətbiqlər üçün uyğundur. Material Design zəngin komponent kitabxanası təmin edir: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog və bir çox başqaları. MaterialApp həmçinin dinamik rənglərlə Material 3-ü dəstəkləyir.

CupertinoApp: iOS stili

CupertinoApp Apple-ın Human Interface Guidelines-ə uyğun Cupertino Design-dan istifadə edir. O, CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar və digər iOS stilli komponentləri təqdim edir. iOS tətbiqləri və ya bütün platformalarda Apple stilini izləyən tətbiqlər üçün CupertinoApp-dan istifadə edin.

WidgetsApp: minimal kök

WidgetsApp — stilləşdirməsiz əsas kök vidjetdir. O, Navigator, MediaQuery və Localizations əlavə edir, lakin Material/Cupertino temalarını və ya komponentlərini təmin etmir. WidgetsApp Material və ya Cupertino-nun artıq olduğu fərdi dizayn sistemləri, oyunlar və ya öz stilləşdirməsi olan tətbiqlər üçün uyğundur.