MaterialApp — bu nima, konfiguratsiya va ildiz vidjetning roli

Flutter-da MaterialApp nima?

MaterialApp — bu Flutter ilovasida Material Design-ni ishga tushiradigan o'rovchi vidjetdir. U Widget Tree-ning ildizi bo'lib, bola vidjetlarga tizim xizmatlariga kirish imkonini beradi: navigatsiya, tema, media so'rovlari va lokalizatsiya. MaterialApp bo'lmasa, ilova standart Material uslubiga ega bo'lmaydi va Scaffold, AppBar, FloatingActionButton va BottomNavigationBar kabi vidjetlardan foydalana olmaydi.

MaterialApp Widget Tree-ga nimani qo'shadi

MaterialApp-dan foydalanganda, Flutter avtomatik ravishda daraxtning ildiziga bir nechta asosiy vidjetlarni qo'shadi: Navigator (navigatsiya uchun ekranlar to'plami), Theme (rang sxemasi va stillar), MediaQuery (qurilma haqida ma'lumot), Localizations (lokalizatsiya qilingan satrlar), Directionality (matn yo'nalishi). Bu vidjetlar InheritedWidget sifatida amalga oshirilgan va ilovaning istalgan joyida BuildContext orqali mavjud.

Asosiy foydalanish

MaterialApp-ning minimal konfiguratsiyasi faqat home parametrini talab qiladi — asosiy ekranda ko'rsatiladigan vidjet. Flutter, WidgetsBinding mexanizmi orqali home-ni Scaffold bo'lmasa, avtomatik ravishda Scaffold-ga o'raydi. Ilova runApp(MaterialApp(home: MyHomePage())) bilan ishga tushirilganda, Flutter MaterialApp-ni ildiz qilib asosiy Widget Tree-ni yaratadi.

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

Ushbu misolda, MaterialApp asosiy temani (yorug' va qorong'i), sarlavhani va asosiy ekranni sozlaydi. title parametri oyna sarlavhasi (desktopda) va foydalanish qulayligi uchun ishlatiladi. theme va darkTheme parametrlari turli rejimlarda ilovaning ko'rinishini belgilaydi.

MaterialApp tuzilishi va parametrlari

MaterialApp 30 dan ortiq parametrlarni qabul qiladi, ular toifalarga bo'linadi: Material Design sozlamalari, marshrutlash, tematizatsiya, lokalizatsiya, xato xatti-harakati va muayyan platformalar uchun sozlamalar. Asosiy parametrlarni bilish qo'shimcha kod yozmasdan ilovani moslashuvchan sozlash imkonini beradi.

Asosiy konfiguratsiya parametrlari

title parametri ilova nomini oyna sarlavhasi va foydalanish qulayligi uchun o'rnatadi. color Android-da vazifa almashtirgich uchun ilova rangini belgilaydi. debugShowCheckedModeBanner reliz qurilishida disk raskadrovka rejimi bannerini yashiradi. showPerformanceOverlay ishlash ma'lumotlari bilan qoplamani yoqadi. supportDarkTheme ilova qorong'i temani qo'llab-quvvatlashini ko'rsatadi.

Muayyan platformalar uchun parametrlar

MaterialApp turli platformalarda xatti-harakatni sozlash uchun parametrlarni taqdim etadi: restorationScopeId Android-da qayta ishga tushirishda ilova holatini saqlash uchun, scrollBehavior turli operatsion tizimlarda aylantirish xatti-harakatini sozlash uchun, useMaterial3 Material 3-ni (Material You) yoqish uchun. Material 3 dinamik ranglar, yangi komponentlar va yangilangan stillarni qo'shadi.

theme va darkTheme bilan tematizatsiya

Tematizatsiya — MaterialApp-ning asosiy parametrlaridan biridir. theme parametri yorug' tema uchun rang palitrasini, tipografiyani, komponent shakllarini va ikonografiyani belgilaydigan ThemeData obyektini qabul qiladi. darkTheme parametri — qorong'i tema uchun analogik konfiguratsiya. Flutter qurilmaning tizim sozlamalariga qarab avtomatik ravishda temani o'zgartiradi.

ThemeData: rang sxemasi

ThemeData primarySwatch (asosiy rang), colorScheme (Material 3 kengaytirilgan rang sxemasi), brightness (yorug' yoki qorong'i), fontFamily (standart shrift), textTheme (matn stillari), cardTheme, appBarTheme, buttonTheme va muayyan komponentlarni sozlash uchun o'nlab boshqa parametrlarni o'z ichiga oladi. Material 3 uchun colorScheme, Material 2 uchun primarySwatch dan foydalaning.

Material 3 dinamik ranglari

Material 3 (Material You) Android 12+ da qurilma fon rasmidan olinadigan dinamik ranglarni qo'llab-quvvatlaydi. Yoqish uchun useMaterial3: true ni o'rnating va colorScheme.fromSeed yoki colorScheme.fromImageProvider dan foydalaning. Dinamik ranglar avtomatik ravishda 5 tonndan iborat harmonik palitra yaratadi: primary, secondary, tertiary, neutral va neutralVariant.

Vidjetlarda temaga kirish

Har qanday vidjet joriy temaga Theme.of(context) orqali kirishi mumkin. Theme.of colors, textTheme va boshqa parametrlarni olish mumkin bo'lgan ThemeData qaytaradi. Tema o'zgarishlariga obuna bo'lish uchun (masalan, yorug' va qorong'i o'rtasida o'tishda) build metodi ichida kontekstdan foydalaning — Flutter tema o'zgarganda vidjetni avtomatik ravishda qayta quradi.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Temali matn namunasi",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Ushbu misolda, Theme.of(context) eng yaqin MaterialApp-dan joriy temani oladi. Fon rangi va matn uslubi avtomatik ravishda joriy temaga (yorug' yoki qorong'i) mos keladi. Tema o'zgartirilganda, Container va Text yangilangan ThemeData-dan yangi qiymatlar bilan qayta quriladi.

MaterialApp-da marshrutlash va navigatsiya

MaterialApp ekranlar o'rtasidagi o'tishlarni boshqaradigan to'plam navigatori Navigator-ni integratsiya qiladi. initialRoute, routes va onGenerateRoute parametrlari Flutter navigatsiyani qanday boshqarishini belgilaydi. Navigator.push va Navigator.pushReplacement dasturiy ravishda ekranlarni o'zgartirishga, Navigator.pop esa orqaga qaytishga imkon beradi.

Nomlangan marshrutlar (routes)

routes parametri Map qabul qiladi, bu yerda kalit marshrut nomi (satr), qiymat esa ekran uchun vidjet yaratadigan funksiyadir. Nomlangan marshrutlar statik navigatsiya uchun qulay: '/' (ildiz marshrut) odatda home-ga mos keladi, '/settings', '/profile' — boshqa ekranlar. Navigator.pushNamed(context, '/settings') sozlamalar ekraniga o'tadi.

Marshrutlarni yaratish (onGenerateRoute)

onGenerateRoute — marshrut routes-da topilmaganda chaqiriladigan funksiyadir. U RouteSettings qabul qiladi va MaterialPageRoute qaytaradi. Ushbu yondashuv marshrutlar ma'lumotlarga bog'liq bo'lgan dinamik navigatsiya uchun foydali (masalan, /user/42). onGenerateRoute marshrut nomini tahlil qiladi, parametrlarni chiqaradi va tegishli ekranni yaratadi.

Chuqur havolalar va named routing

Chuqur havolalarni (deep links) qo'llab-quvvatlash uchun onGenerateInitialRoute va onGenerateRoute parametrlarini birgalikda ishlating. Chuqur havolalar URL orqali ilovaning ma'lum ekranini ochishga imkon beradi (masalan, https://example.com/promo). Flutter Android-da (intent filters orqali) va iOS-da (universal links orqali) chuqur havolalarni boshqaradi va yo'lni onGenerateRoute-ga uzatadi.

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

Ushbu misolda, onGenerateRoute /user/42 formatidagi dinamik marshrutlarni boshqaradi. Agar marshrut statik routes-da topilmasa va dinamik naqshga mos kelmasa, Flutter onUnknownRoute orqali sozlanishi mumkin bo'lgan xato sahifasini ko'rsatadi.

Lokalizatsiya va internatsionalizatsiya

MaterialApp localizationsDelegates va supportedLocales parametrlari orqali o'rnatilgan lokalizatsiya qo'llab-quvvatlashni ta'minlaydi. LocalizationsDelegates lokalizatsiya qilingan satrlarni yuklaydi, supportedLocales esa ilova qaysi tillarni qo'llab-quvvatlashini belgilaydi. Flutter avtomatik ravishda qurilma tilini aniqlaydi va tegishli lokalizatsiya qilingan resurslarni yuklaydi.

supportedLocales va localizationsDelegates sozlash

supportedLocales parametri ilova qo'llab-quvvatlaydigan Locale ro'yxatini qabul qiladi: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — lokalizatsiya qilingan satrlarni yuklaydigan delegatlar ro'yxati. Material Design uchun GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate va GlobalCupertinoLocalizations.delegate qo'shing.

Ilova satrlarini lokalizatsiya qilish

O'z satrlaringizni lokalizatsiya qilish uchun flutter_localizations yoki intl paketi orqali yaratilgan AppLocalizations sinfidan foydalaning. AppLocalizations lokalizatsiya qilingan satrlarga kirish uchun statik metodlarni taqdim etadi: AppLocalizations.of(context)!.helloMessage. MaterialApp avtomatik ravishda Localizations-ni Widget Tree-ga uzatadi, ularni kontekst orqali mavjud qiladi.

• flutter_localizations — Material vidjetlari va tizim satrlarini lokalizatsiya qilish uchun rasmiy paket.
• intl — internatsionalizatsiya paketi: raqamlar, sanalar, valyutalarni formatlash va pluralizatsiya.
• ARB fayllari — flutter_localizations va intl tomonidan ishlatiladigan lokalizatsiya qilingan satrlarni saqlash formati.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter turli platformalar uchun uchta ildiz vidjetni taqdim etadi: MaterialApp (Android va veb uchun Material Design), CupertinoApp (iOS uslubi) va WidgetsApp (stillashsiz asosiy vidjet). Ildiz vidjetni tanlash butun ilovaning ko'rinishini va platforma komponentlarining mavjudligini belgilaydi.

MaterialApp: universal tanlov

MaterialApp Android, veb va desktop-da yaxshi ko'rinadigan Material Design qo'llab-quvvatlashi tufayli ko'pchilik ilovalar uchun mos keladi. Material Design boy komponentlar kutubxonasini ta'minlaydi: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog va boshqalar. MaterialApp shuningdek dinamik ranglar bilan Material 3-ni qo'llab-quvvatlaydi.

CupertinoApp: iOS uslubi

CupertinoApp Apple-ning Human Interface Guidelines-ga mos Cupertino Design-dan foydalanadi. U CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar va boshqa iOS stilli komponentlarni taqdim etadi. iOS ilovalari yoki barcha platformalarda Apple uslubiga rioya qiladigan ilovalar uchun CupertinoApp-dan foydalaning.

WidgetsApp: minimal ildiz

WidgetsApp — stillashsiz asosiy ildiz vidjetdir. U Navigator, MediaQuery va Localizations qo'shadi, lekin Material/Cupertino temalari yoki komponentlarini ta'minlamaydi. WidgetsApp Material yoki Cupertino ortiqcha bo'lgan maxsus dizayn tizimlari, o'yinlar yoki o'z stillashiga ega ilovalar uchun mos keladi.