Theme və ThemeData — bu nədir, prinsiplər və stil konfiqurasiyası

Theme və ThemeData nədir

ThemeData — Material tətbiqinin vizual üslubunun tam təsvirini ehtiva edən sinif. MaterialApp-ə theme və ya darkTheme parametri vasitəsilə ötürülür və bütün uşaq vidjetlərə miras qalır. Hər bir Material Design vidjeti öz üslublarını almaq üçün ThemeData-dan istifadə edir: düymə rəngləri, AppBar ölçüləri, mətn üslubları, kart boşluqları və nişanlar.

ThemeData-nın əsasında primary, secondary, surface, error və digər rəngləri təyin edən ColorScheme dayanır. Bu rənglərdən bütün Material komponentləri üçün vəziyyətlər (hover, focus, pressed) avtomatik hesablanır. Məsələn, ElevatedButton fon üçün primary rəngindən və mətn üçün onPrimary-dən istifadə edir — əlavə konfiqurasiya olmadan.

Theme vidjeti — mövzunu vidjet ağacında aşağıya yayan InheritedWidget-dir. İstənilən vidjet Theme.of(context) vasitəsilə cari mövzunu əldə edə bilər, həmçinin Theme.copyWith və ya ThemeData.copyWith vasitəsilə mövcud mövzu əsasında yenidən təyin edilmiş dəyərlərlə yeni mövzu yarada bilər.

Nəticə: ThemeData — tətbiq üslublarının vahid mənbəyidir. İnkişafa ThemeData təyin etməklə başlayın — bu, bütün layihənin vizual dilini müəyyən edir və müxtəlif ekranlarda dağınıq üslubların qarşısını alır.

ColorScheme: rəng palitrasının əsası

ColorScheme — Material 3-də temizasiyanın mərkəzi elementidir. Köhnəlmiş primarySwatch və primaryColor-ı əvəz edərək, bütün vəziyyətlər və komponentlər üçün tam rəng dəsti təqdim edir.

ColorScheme 12 əsas rəngdən ibarətdir: primary, onPrimary, secondary, onSecondary, surface, onSurface, error, onError, background, onBackground, outline və shadow. Hər rəng üçün light və dark variantları, həmçinin hover, focus, pressed və dragged vəziyyətləri üçün rənglər avtomatik hesablanır. Yalnız primary göstərildikdə, framework qalan rəngləri ColorScheme.fromSeed vasitəsilə avtomatik yaradır.

ColorScheme.fromSeed metodu (Material 3) əsas rəngi seedColor qəbul edir və Material Design 3 alqoritmi əsasında tam harmoniya palitrası yaradır. Bu, complementary və analogous rənglərin əl ilə seçilməsini aradan qaldırır. Bir marka əsas rəngini ötürmək kifayətdir və ColorScheme.fromSeed bütün Material sistemi üçün uyğun palitra yaradır.

Nəticə: yeni layihələrdə palitra yaratmaq üçün ColorScheme.fromSeed istifadə edin. Material 2 uyğunluğu üçün — primarySwatch. ColorScheme Material 3 üçün məcburi minimumdur.

Typography və TextTheme: tətbiq şriftləri

TextTheme — bütün başlıq, alt başlıq, body və etiket səviyyələri üçün mətn üslublarını təyin edən ThemeData-nın hissəsidir. Material Design 15 mətn üslubu müəyyən edir: headlineLarge, headlineMedium, headlineSmall, titleLarge, titleMedium və digərləri.

Tipoqrafika ya GoogleFonts vasitəsilə şriftlərin avtomatik yüklənməsi üçün, ya da quraşdırılmış Theme.of(context).textTheme ilə fərdi TextStyle-lər vasitəsilə təyin edilir. GoogleFonts google_fonts paketi vasitəsilə yüzlərlə şrift təqdim edir və ilk yükləmədən sonra onları lokally olaraq keşləyir. Alternativ — şriftləri pubspec.yaml vasitəsilə layihənin assets-ə yerləşdirməkdir.

Adaptiv tipoqrafika üçün TextTheme MediaQuery.textScaleFactor-i dəstəkləyir — sistem şrifti artırıldıqda bütün mətn üslubları mütənasib olaraq miqyaslanır. Əlavə olaraq, MediaQuery.size.width-dən asılı olaraq isTest vasitəsilə müxtəlif formalar üçün fərqli şrift ölçüləri təyin edilə bilər.

Nəticə: TextTheme-i ThemeData-da təyin edin və bütün mətn elementləri üçün Theme.of(context).textTheme istifadə edin. Bu, şriftlərin vahidliyini təmin edir və tipoqrafikada qlobal dəyişiklikləri asanlaşdırır.

Mövzunun miras alınması və yenidən təyini

Theme — mövzunu valideyndən uşaqlara yayan InheritedWidget-dir. İstənilən uşaq vidjet həm Theme.of(context) vasitəsilə cari mövzunu oxuya, həm də ThemeData.copyWith vasitəsilə dəyişikliklərlə öz surətini yarada bilər.

Miras mexanizmi: əgər vidjet yeni məlumatlarla Theme-ə bükülübsə, onun bütün nəsli yenidən təyin edilmiş mövzunu görür, bu bükülmədən kənar vidjetlər isə orijinalı görür. Bu, məsələn, müəyyən bir ekran üçün üslubları təcrid etməyə imkan verir: başlıq dəyişdirilmiş AppBarTheme ilə fərdi mövzudan istifadə edir, qalan tətbiq isə standartdan.

Theme-in iç-içə yerləşməsi limitsiz ola bilər. Flutter iyerarxik axtarışdan istifadə edir: Theme.of(context) çağırıldıqda framework ağacda yuxarı qalxaraq ilk Theme-ə çatır və onun mövzusunu qaytarır. Heç bir Theme tapılmazsa — istisna atılır. Buna görə MaterialApp həmişə tətbiqi Theme-ə bükür.

Nəticə: Theme-in miras alınması — üslubları təcrid etmək üçün çevik mexanizmdir. Ümumi konfiqurasiyanı təkrarlamadan ayrı-ayrı ekranlar üçün mövzu yenidən təyin etməsindən istifadə edin.

Dark theme: tətbiqin qaranlıq mövzusu

Dark theme — Flutter-in açıq və qaranlıq mövzu arasında keçid etmək üçün quraşdırılmış imkanıdır. ThemeData MaterialApp-in theme (açıq) və darkTheme (qaranlıq) parametrlərində saxlanılır. themeMode parametri rejimi idarə edir: ThemeMode.light (həmişə açıq), ThemeMode.dark (həmişə qaranlıq) və ya ThemeMode.system (sistem parametrlərinə uyğun).

Qaranlıq mövzu tətbiq edilərkən bütün üslubları yenidən yaratmaq lazım deyil. darkTheme-də ColorScheme.fromSeed(seedColor, brightness: Brightness.dark) ötürmək kifayətdir. Framework avtomatik olaraq rəngləri qaranlıq fon üçün düzəldir: surface tünd boz olur, mətn — açıq. Qalan alt mövzular (AppBarTheme, CardTheme, BottomNavigationBarTheme) açıq versiyadan miras alır, əgər açıq şəkildə yenidən təyin edilməyibsə.

Mövzular arasında hamar keçid üçün Flutter AnimatedTheme vasitəsilə animasiya təqdim edir. themeMode dəyişdikdə rənglər və üslublar animasiya olunur, vizual olaraq xoş keçid yaradır. AnimatedTheme animasiya sürətini tənzimləmək üçün Duration və Curve-dən istifadə edir.

Nəticə: dark theme darkTheme və ColorScheme.fromSeed ilə brightness: Brightness.dark vasitəsilə tətbiq edilir. İstifadəçinin sistem parametrlərinə uyğunlaşmaq üçün ThemeMode.system istifadə edin.

Theme və ThemeData ilə kod nümunələri

Nümunə 1 — ColorScheme.fromSeed istifadə edərək MaterialApp vasitəsilə qlobal mövzu konfiqurasiyası.

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

Bu nümunədə Material 3 ilə ThemeData, indigo əsasında rəng sxemi və fərdi AppBar və Card üslubları yaradılır. useMaterial3 yeni Material 3 mövzu sistemini aktivləşdirir, ColorScheme.fromSeed isə tam palitra yaradır.

Nümunə 2 — mövzuya giriş və tətbiqin bir hissəsi üçün yenidən təyin etmə.

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

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

İkinci nümunə Theme.of(context)-in üslubları oxumaq üçün istifadəsini və qlobal konfiqurasiyanı dəyişmədən ağacın bir hissəsində mövzunu yenidən təyin etmək üçün Theme() ilə copyWith istifadəsini göstərir. Theme daxilindəki SpecialSection narıncı primary rəngi alacaq, qalan tətbiq isə orijinal indigo rəngini saxlayacaq.

Nəticə: qlobal mövzu MaterialApp-də təyin edilir, giriş Theme.of(context) vasitəsilə, yenidən təyin etmə isə Theme ilə copyWith vasitəsilə aparılır. Material 3 üçün ColorScheme.fromSeed istifadə edin.

Mövzu quraşdırmasında tipik səhvlər

Səhv 1: Material 3-də ColorScheme əvəzinə primarySwatch istifadə etmək. primarySwatch köhnəlmişdir və Material 3-də dəstəklənmir. useMaterial3: true ilə primarySwatch istifadə edildikdə Flutter xəbərdarlıq göstərir. Həll: palitra yaratmaq üçün ColorScheme.fromSeed-ə keçin.

Səhv 2: Theme.of(context) istifadə etmək əvəzinə vidjetlərdə rəngləri sərt şəkildə təyin etmək. Proqramçılar birbaşa Container-də Colors.blue yazır, mövzudan primary və ya secondary rəngi əvəzinə. Mövzu dəyişdikdə bu cür rənglər dəyişməz qalır, vahid üslubu pozur. Həll: həmişə Theme.of(context).colorScheme.primary və ya mövzudan digər rənglərdən istifadə edin.

Səhv 3: darkTheme-in olmaması. Əgər tətbiq darkTheme müəyyən etmirsə, cihazda qaranlıq mövzu aktivləşdirildikdə Flutter avtomatik olaraq açıq mövzunu uyğunlaşdırmağa çalışır ki, bu da çox vaxt keyfiyyətsiz nəticə verir. Həll: həmişə MaterialApp-də darkTheme ötürün, hətta qaranlıq mövzu prioritet olmasa belə — bu istifadəçilər üçün vacib UX-dir.

Səhv 4: hər build-də yeni mövzu yaratmaq. Əgər ThemeData build metodu daxilində yaradılırsa, vidjetin hər yenidən qurulması yeni mövzu obyekti yaradır, InheritedWidget optimallaşdırmasını pozur. Həll: ThemeData-nı build-dən kənarda statik sahəyə və ya const konstruktora çıxarın.

Nəticə: düzgün temizasiya vahid mərkəzləşdirilmiş yanaşma tələb edir. ThemeData-nı sabitlərə çıxarın, mövzudan rəng sxemlərindən istifadə edin və həmişə hər iki mövzunu — açıq və qaranlığı təyin edin.