Theme va ThemeData — bu nima, tamoyillar va uslublarni sozlash

Theme va ThemeData nima

ThemeData — Material ilovasining vizual uslubining to'liq tavsifini o'z ichiga olgan sinf. MaterialApp-ga theme yoki darkTheme parametri orqali uzatiladi va barcha bola vidjetlarga meros bo'ladi. Har bir Material Design vidjeti o'z uslublarini olish uchun ThemeData-dan foydalanadi: tugmalar ranglari, AppBar o'lchamlari, matn uslublari, kartochkalar bo'shliqlari va piktogrammalar.

ThemeData asosida primary, secondary, surface, error va boshqa ranglarni belgilaydigan ColorScheme yotadi. Bu ranglardan barcha Material komponentlari uchun holatlar (hover, focus, pressed) avtomatik hisoblanadi. Masalan, ElevatedButton fon uchun primary rangidan va matn uchun onPrimary dan foydalanadi — qo'shimcha sozlashsiz.

Theme vidjeti — mavzuni vidjet daraxti bo'ylab pastga tarqatadigan InheritedWidget dir. Har qanday vidjet Theme.of(context) orqali joriy mavzuni olishi mumkin, shuningdek, Theme.copyWith yoki ThemeData.copyWith orqali mavjud mavzu asosida qayta belgilangan qiymatlar bilan yangi mavzu yaratishi mumkin.

Xulosa: ThemeData — ilova uslublarining yagona manbai. Ishlanmani ThemeData belgilash bilan boshlang — bu butun loyihaning vizual tilini o'rnatadi va turli ekranlarda tarqoq uslublarning oldini oladi.

ColorScheme: rang palitrasining asosi

ColorScheme — Material 3 da temizatsiyaning markaziy elementi. Eski primarySwatch va primaryColor o'rnini bosadi va barcha holatlar va komponentlar uchun to'liq ranglar to'plamini taqdim etadi.

ColorScheme 12 ta asosiy rangni o'z ichiga oladi: primary, onPrimary, secondary, onSecondary, surface, onSurface, error, onError, background, onBackground, outline va shadow. Har bir rang uchun light va dark variantlari, shuningdek, hover, focus, pressed va dragged holatlari uchun ranglar avtomatik hisoblanadi. Faqat primary ko'rsatilganda, framework qolgan ranglarni ColorScheme.fromSeed orqali avtomatik yaratadi.

ColorScheme.fromSeed metodi (Material 3) asosiy rangni seedColor qabul qiladi va Material Design 3 algoritmi asosida to'liq uyg'un palitrani yaratadi. Bu complementary va analogous ranglarni qo'lda tanlashni bartaraf etadi. Bitta asosiy brend rangini uzatish kifoya va ColorScheme.fromSeed butun Material tizimi uchun mos palitrani yaratadi.

Xulosa: yangi loyihalarda palitra yaratish uchun ColorScheme.fromSeed dan foydalaning. Material 2 muvofiqligi uchun — primarySwatch. ColorScheme Material 3 uchun majburiy minimumdir.

Typography va TextTheme: ilova shriftlari

TextTheme — barcha sarlavha, ost sarlavha, body va etiketka darajalari uchun matn uslublarini belgilaydigan ThemeData qismi. Material Design 15 ta matn uslubini belgilaydi: headlineLarge, headlineMedium, headlineSmall, titleLarge, titleMedium va boshqalar.

Tipografika yoki GoogleFonts orqali shriftlarni avtomatik yuklash uchun, yoki o'rnatilgan Theme.of(context).textTheme bilan maxsus TextStyle lar orqali o'rnatiladi. GoogleFonts google_fonts paketi orqali yuzlab shriftlarni taqdim etadi va birinchi yuklashdan keyin ularni lokal keshlaydi. Muqobil — shriftlarni pubspec.yaml orqali loyiha aktivlariga joylashtirish.

Adaptiv tipografika uchun TextTheme MediaQuery.textScaleFactor ni qo'llab-quvvatlaydi — tizim shrifti oshirilganda barcha matn uslublari mutanosib ravishda masshtablanadi. Qo'shimcha ravishda, MediaQuery.size.width ga qarab isTest orqali turli form-faktorlar uchun turli shrift o'lchamlari o'rnatilishi mumkin.

Xulosa: TextTheme ni ThemeData da belgilang va barcha matn elementlari uchun Theme.of(context).textTheme dan foydalaning. Bu shriftlarning bir xilligini ta'minlaydi va tipografikadagi global o'zgarishlarni soddalashtiradi.

Mavzuning meros olishi va qayta belgilanishi

Theme — mavzuni ota-onadan bolalarga tarqatadigan InheritedWidget. Har qanday bola vidjet ham Theme.of(context) orqali joriy mavzuni o'qishi, ham ThemeData.copyWith orqali o'zgarishlar bilan o'z nusxasini yaratishi mumkin.

Meros mexanizmi: agar vidjet yangi ma'lumotlar bilan Theme ga o'ralgan bo'lsa, uning barcha avlodlari qayta belgilangan mavzuni ko'radi, bu o'ramdan tashqaridagi vidjetlar esa asl nusxani ko'radi. Bu, masalan, ma'lum bir ekran uchun uslublarni ajratish imkonini beradi: sarlavha o'zgartirilgan AppBarTheme bilan maxsus mavzudan foydalanadi, qolgan ilova esa standartdan.

Theme ning ichma-ich joylashishi cheklanmagan bo'lishi mumkin. Flutter ierarxik qidiruvdan foydalanadi: Theme.of(context) chaqirilganda framework daraxt bo'ylab yuqoriga birinchi Theme ga ko'tariladi va uning mavzusini qaytaradi. Agar hech qanday Theme topilmasa — istisno tashlanadi. Shuning uchun MaterialApp har doim ilovani Theme ga o'raydi.

Xulosa: Theme ning meros olishi — uslublarni ajratish uchun moslashuvchan mexanizm. Umumiy konfiguratsiyani takrorlamasdan alohida ekranlar uchun mavzuni qayta belgilashdan foydalaning.

Dark theme: ilovaning qorong'i mavzusi

Dark theme — Flutter-ning yorug' va qorong'i mavzu o'rtasida almashish uchun o'rnatilgan imkoniyati. ThemeData MaterialApp ning theme (yorug') va darkTheme (qorong'i) parametrlarida saqlanadi. themeMode parametri rejimni boshqaradi: ThemeMode.light (har doim yorug'), ThemeMode.dark (har doim qorong'i) yoki ThemeMode.system (tizim sozlamalariga mos keladi).

Qorong'i mavzuni amalga oshirishda barcha uslublarni qaytadan yaratish shart emas. darkTheme da ColorScheme.fromSeed(seedColor, brightness: Brightness.dark) ni uzatish kifoya. Framework avtomatik ravishda ranglarni qorong'i fon uchun tuzatadi: surface to'q kulrang bo'ladi, matn — yorug'. Qolgan ostmavzular (AppBarTheme, CardTheme, BottomNavigationBarTheme) yorug' versiyadan meros oladi, agar ochiqchasiga qayta belgilanmagan bo'lsa.

Mavzular o'rtasida silliq o'tish uchun Flutter AnimatedTheme orqali animatsiya taqdim etadi. themeMode o'zgarganda ranglar va uslublar animatsiya qilinadi, vizual jihatdan yoqimli almashinuv yaratadi. AnimatedTheme animatsiya tezligini sozlash uchun Duration va Curve dan foydalanadi.

Xulosa: dark theme darkTheme va ColorScheme.fromSeed bilan brightness: Brightness.dark orqali amalga oshiriladi. Foydalanuvchining tizim sozlamalariga mos kelish uchun ThemeMode.system dan foydalaning.

Theme va ThemeData bilan kod misollari

Misol 1 — ColorScheme.fromSeed yordamida MaterialApp orqali global mavzu sozlashi.

final ThemeData appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
    brightness: Brightness.light,
  ),
  appBarTheme: const AppBarTheme(
    centerTitle: true,
    elevation: 0,
  ),
  cardTheme: const CardTheme(
    elevation: 2,
    margin: EdgeInsets.all(8),
  ),
);

return MaterialApp(
  theme: appTheme,
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

Ushbu misolda Material 3 bilan ThemeData, indigo asosidagi rang sxemasi va maxsus AppBar va Card uslublari yaratiladi. useMaterial3 yangi Material 3 mavzu tizimini faollashtiradi, ColorScheme.fromSeed esa to'liq palitrani yaratadi.

Misol 2 — mavzuga kirish va ilovaning bir qismi uchun qayta belgilash.

Widget build(BuildContext context) {
  final theme = Theme.of(context);

  return Column(
    children: [
      Text(
        'Standart sarlavha',
        style: theme.textTheme.headlineMedium,
      ),
      Theme(
        data: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
            primary: Colors.orange,
          ),
        ),
        child: const SpecialSection(),
      ),
    ],
  );
}

Ikkinchi misol Theme.of(context) ni uslublarni o'qish uchun va global konfiguratsiyani o'zgartirmasdan daraxtning bir qismida mavzuni qayta belgilash uchun Theme() bilan copyWith dan foydalanishni ko'rsatadi. Theme ichidagi SpecialSection to'q sariq primary rangini oladi, qolgan ilova esa asl indigo rangini saqlaydi.

Xulosa: global mavzu MaterialApp da o'rnatiladi, kirish Theme.of(context) orqali, qayta belgilash Theme bilan copyWith orqali amalga oshiriladi. Material 3 uchun ColorScheme.fromSeed dan foydalaning.

Mavzu sozlashda tipik xatolar

Xato 1: Material 3 da ColorScheme o'rniga primarySwatch ishlatish. primarySwatch eskirgan va Material 3 da qo'llab-quvvatlanmaydi. useMaterial3: true bilan primarySwatch ishlatilganda Flutter ogohlantirish chiqaradi. Yechim: palitra yaratish uchun ColorScheme.fromSeed ga o'ting.

Xato 2: Theme.of(context) ishlatish o'rniga vidjetlarda ranglarni qattiq belgilash. Dasturchilar to'g'ridan-to'g'ri Container da Colors.blue yozadi, mavzudan primary yoki secondary rang o'rniga. Mavzu o'zgarganda bunday ranglar o'zgarishsiz qoladi, yagona uslubni buzadi. Yechim: har doim Theme.of(context).colorScheme.primary yoki mavzudan boshqa ranglardan foydalaning.

Xato 3: darkTheme yo'qligi. Agar ilova darkTheme ni belgilamasa, qurilmada qorong'i mavzu yoqilganda Flutter avtomatik ravishda yorug' mavzuni moslashtirishga harakat qiladi, bu ko'pincha sifatsiz natija beradi. Yechim: har doim MaterialApp da darkTheme ni uzating, hatto qorong'i mavzu ustuvor bo'lmasa ham — bu foydalanuvchilar uchun muhim UX.

Xato 4: har bir build da yangi mavzu yaratish. Agar ThemeData build metodi ichida yaratilsa, vidjetning har bir qayta qurilishi yangi mavzu obyektini yaratadi, InheritedWidget optimallashtirishini buzadi. Yechim: ThemeData ni build dan tashqarida statik maydonga yoki const konstruktorga chiqaring.

Xulosa: to'g'ri temizatsiya yagona markazlashtirilgan yondashuvni talab qiladi. ThemeData ni konstantalarga chiqaring, mavzudan rang sxemalaridan foydalaning va har doim ikkala mavzuni — yorug' va qorong'ini belgilang.