Theme اور ThemeData — یہ کیا ہے، اصول اور اسٹائل کنفیگریشن

Theme اور ThemeData کیا ہیں

ThemeData ایک کلاس ہے جس میں Material ایپلیکیشن کے بصری اسٹائل کی مکمل تفصیل ہوتی ہے۔ یہ theme یا darkTheme پیرامیٹر کے ذریعے MaterialApp کو پاس کیا جاتا ہے اور تمام چائلڈ ویجٹ اسے وراثت میں پاتے ہیں۔ ہر Material Design ویجٹ اپنے اسٹائل حاصل کرنے کے لیے ThemeData استعمال کرتا ہے: بٹن کے رنگ، AppBar کے سائز، ٹیکسٹ اسٹائل، کارڈ کے مارجن اور آئیکن۔

ThemeData کے مرکز میں ColorScheme ہے، جو primary، secondary، surface، error اور دیگر رنگوں کی وضاحت کرتا ہے۔ ان رنگوں سے تمام Material کمپوننٹس کے لیے حالتیں (hover، focus، pressed) خودکار طور پر شمار کی جاتی ہیں۔ مثال کے طور پر، ElevatedButton پس منظر کے لیے primary رنگ اور ٹیکسٹ کے لیے onPrimary استعمال کرتا ہے — بغیر کسی اضافی کنفیگریشن کے۔

Theme ویجٹ ایک InheritedWidget ہے جو تھیم کو ویجٹ ٹری میں نیچے پھیلاتا ہے۔ کوئی بھی ویجٹ Theme.of(context) کے ذریعے موجودہ تھیم تک رسائی حاصل کر سکتا ہے، اور Theme.copyWith یا ThemeData.copyWith کے ذریعے اووررائڈ کردہ اقدار کے ساتھ موجودہ تھیم کی بنیاد پر نیا تھیم بھی بنا سکتا ہے۔

خلاصہ: ThemeData ایپلیکیشن کے اسٹائل کا واحد ذریعہ ہے۔ ThemeData کی وضاحت کرکے ڈویلپمنٹ شروع کریں — یہ پورے پروجیکٹ کی بصری زبان متعین کرتا ہے اور مختلف اسکرینوں پر بکھرے ہوئے اسٹائل کو روکتا ہے۔

ColorScheme: رنگ پیلیٹ کی بنیاد

ColorScheme Material 3 میں تھیمنگ کا مرکزی عنصر ہے۔ یہ پرانے primarySwatch اور primaryColor کی جگہ لیتا ہے، تمام حالتوں اور کمپوننٹس کے لیے رنگوں کا مکمل سیٹ فراہم کرتا ہے۔

ColorScheme میں 12 اہم رنگ ہیں: primary، onPrimary، secondary، onSecondary، surface، onSurface، error، onError، background، onBackground، outline اور shadow۔ ہر رنگ کے لیے ہلکے اور گہرے ویریئنٹ خودکار طور پر شمار کیے جاتے ہیں، نیز hover، focus، pressed اور dragged حالتوں کے رنگ۔ جب صرف primary متعین کیا جاتا ہے، تو فریم ورک ColorScheme.fromSeed کے ذریعے باقی رنگ خودکار طور پر جنریٹ کرتا ہے۔

ColorScheme.fromSeed طریقہ (Material 3) ایک بنیادی رنگ seedColor لیتا ہے اور Material Design 3 الگورتھم کی بنیاد پر مکمل ہم آہنگ پیلیٹ جنریٹ کرتا ہے۔ یہ تکمیلی اور مشابہ رنگوں کے دستی انتخاب کی ضرورت کو ختم کرتا ہے۔ صرف ایک بنیادی برانڈ رنگ پاس کریں، اور ColorScheme.fromSeed پورے Material سسٹم کے لیے ایک مربوط پیلیٹ بناتا ہے۔

خلاصہ: نئے پروجیکٹس میں، پیلیٹ جنریٹ کرنے کے لیے ColorScheme.fromSeed استعمال کریں۔ Material 2 مطابقت کے لیے — primarySwatch استعمال کریں۔ Material 3 کے لیے ColorScheme کم از کم ضرورت ہے۔

ٹائپوگرافی اور TextTheme: ایپلیکیشن فونٹس

TextTheme ThemeData کا ایک حصہ ہے جو تمام ہیڈنگ لیولز، ذیلی سرخیاں، باڈی ٹیکسٹ اور لیبل کے لیے ٹیکسٹ اسٹائل متعین کرتا ہے۔ Material Design 15 ٹیکسٹ اسٹائل متعین کرتا ہے: headlineLarge، headlineMedium، headlineSmall، titleLarge، titleMedium اور دیگر۔

ٹائپوگرافی یا تو GoogleFonts کے ذریعے خودکار فونٹ لوڈنگ کے لیے، یا کسٹم TextStyle آبجیکٹس کے ساتھ بلٹ ان Theme.of(context).textTheme کے ذریعے سیٹ کی جاتی ہے۔ GoogleFonts google_fonts پیکیج کے ذریعے سینکڑوں فونٹس فراہم کرتا ہے، جو پہلے لوڈ کے بعد انہیں مقامی طور پر کیش کرتا ہے۔ متبادل — pubspec.yaml کے ذریعے پروجیکٹ کی اثاثوں میں فونٹ ایمبیڈ کرنا ہے۔

انکولی ٹائپوگرافی کے لیے، TextTheme MediaQuery.textScaleFactor کو سپورٹ کرتا ہے — جب سسٹم فونٹ سائز بڑھتا ہے، تمام ٹیکسٹ اسٹائل متناسب طور پر اسکیل ہوتے ہیں۔ اضافی طور پر، MediaQuery.size.width پر منحصر isTest کے ذریعے مختلف فارم فیکٹرز کے لیے مختلف فونٹ سائز سیٹ کیے جا سکتے ہیں۔

خلاصہ: ThemeData میں TextTheme متعین کریں اور تمام ٹیکسٹ عناصر کے لیے Theme.of(context).textTheme استعمال کریں۔ یہ فونٹ یکسانیت یقینی بناتا ہے اور عالمی ٹائپوگرافی تبدیلیوں کو آسان بناتا ہے۔

تھیم انہیریٹنس اور اووررائڈنگ

Theme ایک InheritedWidget ہے جو تھیم کو والدین سے بچوں میں پھیلاتا ہے۔ کوئی بھی چائلڈ ویجٹ Theme.of(context) کے ذریعے موجودہ تھیم پڑھ سکتا ہے اور ThemeData.copyWith کے ذریعے تبدیلیوں کے ساتھ اپنی کاپی بنا سکتا ہے۔

انہیریٹنس میکانزم: اگر کوئی ویجٹ نئے ڈیٹا کے ساتھ Theme میں لپیٹا گیا ہے، تو اس کی تمام اولاد اووررائڈ کردہ تھیم دیکھتی ہے، جبکہ اس لپیٹ کے باہر کے ویجٹ اصل تھیم دیکھتے ہیں۔ یہ مثال کے طور پر، کسی مخصوص اسکرین کے لیے اسٹائل کو الگ کرنے کی اجازت دیتا ہے: ہیڈر تبدیل شدہ AppBarTheme کے ساتھ کسٹم تھیم استعمال کرتا ہے، جبکہ باقی ایپلیکیشن معیاری تھیم استعمال کرتی ہے۔

Theme کی نیسٹنگ لامحدود ہو سکتی ہے۔ Flutter درجہ بندی کی تلاش استعمال کرتا ہے: Theme.of(context) کو کال کرنے پر، فریم ورک پہلے Theme تک ٹری میں اوپر جاتا ہے اور اس کا تھیم واپس کرتا ہے۔ اگر کوئی Theme نہ ملے — تو ایک استثناء پھینکا جاتا ہے۔ لہذا، MaterialApp ہمیشہ ایپلیکیشن کو Theme میں لپیٹتا ہے۔

خلاصہ: Theme انہیریٹنس اسٹائل علیحدگی کے لیے ایک لچکدار میکانزم ہے۔ عالمی کنفیگریشن کو نقل کیے بغیر انفرادی اسکرینوں کے لیے تھیم اووررائڈنگ استعمال کریں۔

ڈارک تھیم: ایپلیکیشن کا ڈارک موڈ

ڈارک تھیم Flutter کی لائٹ اور ڈارک تھیم کے درمیان سوئچ کرنے کی بلٹ ان صلاحیت ہے۔ ThemeData MaterialApp کے theme (لائٹ) اور darkTheme (ڈارک) پیرامیٹرز میں محفوظ ہوتا ہے۔ themeMode پیرامیٹر موڈ کو کنٹرول کرتا ہے: ThemeMode.light (ہمیشہ لائٹ)، ThemeMode.dark (ہمیشہ ڈارک) یا ThemeMode.system (سسٹم سیٹنگز کی پیروی کرتا ہے)۔

ڈارک تھیم کو لاگو کرتے وقت، تمام اسٹائل کو دوبارہ بنانے کی ضرورت نہیں ہے۔ بس ColorScheme.fromSeed(seedColor, brightness: Brightness.dark) کو darkTheme میں پاس کریں۔ فریم ورک خود بخود ڈارک بیک گراؤنڈ کے لیے رنگوں کو ایڈجسٹ کرے گا: surface گہرا گرے ہو جاتا ہے، ٹیکسٹ ہلکا ہو جاتا ہے۔ دیگر ذیلی تھیمز (AppBarTheme، CardTheme، BottomNavigationBarTheme) لائٹ ورژن سے وراثت میں ملتی ہیں جب تک کہ واضح طور پر اووررائڈ نہ کی جائیں۔

تھیمز کے درمیان ہموار منتقلی کے لیے، Flutter AnimatedTheme کے ذریعے اینیمیشن فراہم کرتا ہے۔ themeMode تبدیل ہونے پر، رنگ اور اسٹائل اینیمیٹ ہوتے ہیں، ایک بصری طور پر خوشگوار منتقلی پیدا کرتے ہیں۔ AnimatedTheme اینیمیشن سپیڈ کنفیگر کرنے کے لیے Duration اور Curve استعمال کرتا ہے۔

خلاصہ: ڈارک تھیم darkTheme اور ColorScheme.fromSeed کو brightness: Brightness.dark کے ساتھ استعمال کرکے لاگو کیا جاتا ہے۔ صارف کی سسٹم سیٹنگز کی پیروی کرنے کے لیے ThemeMode.system استعمال کریں۔

Theme اور ThemeData کے ساتھ کوڈ مثالیں

مثال 1 — ColorScheme.fromSeed استعمال کرکے MaterialApp کے ذریعے عالمی تھیم کنفیگریشن۔

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

یہ مثال Material 3، انڈیگو پر مبنی رنگ سکیم اور کسٹم AppBar اور Card اسٹائل کے ساتھ ThemeData بناتی ہے۔ useMaterial3 نئے Material 3 تھیمنگ سسٹم کو فعال کرتا ہے، اور ColorScheme.fromSeed مکمل پیلیٹ جنریٹ کرتا ہے۔

مثال 2 — تھیم تک رسائی اور ایپلیکیشن کے ایک حصے کے لیے اووررائڈ کرنا۔

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

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

دوسری مثال اسٹائل پڑھنے کے لیے Theme.of(context) کا استعمال اور عالمی کنفیگریشن کو تبدیل کیے بغیر ٹری کے ایک حصے میں تھیم اووررائڈ کرنے کے لیے copyWith کے ساتھ Theme() کا استعمال دکھاتی ہے۔ Theme کے اندر SpecialSection نارنجی primary رنگ حاصل کرے گا، جبکہ باقی ایپلیکیشن اصل انڈیگو برقرار رکھتی ہے۔

خلاصہ: عالمی تھیم MaterialApp میں سیٹ کی جاتی ہے، Theme.of(context) کے ذریعے ایکسس کی جاتی ہے، اور copyWith کے ساتھ Theme کے ذریعے اووررائڈ کی جاتی ہے۔ Material 3 کے لیے، ColorScheme.fromSeed استعمال کریں۔

تھیم کنفیگریشن میں عام غلطیاں

غلطی 1: Material 3 میں ColorScheme کی بجائے primarySwatch استعمال کرنا۔ primarySwatch فرسودہ ہے اور Material 3 میں سپورٹ نہیں کیا جاتا۔ primarySwatch کے ساتھ useMaterial3: true استعمال کرنے پر، Flutter ایک انتباہ جاری کرتا ہے۔ حل: پیلیٹ جنریشن کے لیے ColorScheme.fromSeed پر سوئچ کریں۔

غلطی 2: Theme.of(context) استعمال کرنے کی بجائے ویجٹ میں رنگ ہارڈکوڈ کرنا۔ ڈویلپرز تھیم سے primary یا secondary رنگ کی بجائے براہ راست Container میں Colors.blue لکھتے ہیں۔ تھیم تبدیل ہونے پر، یہ رنگ تبدیل نہیں ہوتے، یکسانیت کو توڑتے ہیں۔ حل: ہمیشہ Theme.of(context).colorScheme.primary یا تھیم سے دیگر رنگ استعمال کریں۔

غلطی 3: darkTheme کی غیر موجودگی۔ اگر ایپلیکیشن darkTheme متعین نہیں کرتی، ڈیوائس پر ڈارک تھیم آن ہونے پر، Flutter خود بخود لائٹ تھیم کو اپنانے کی کوشش کرتا ہے، جو اکثر کم معیار کا نتیجہ دیتا ہے۔ حل: ہمیشہ MaterialApp میں darkTheme پاس کریں، چاہے ڈارک تھیم ترجیح نہ ہو — یہ صارفین کے لیے اہم UX ہے۔

غلطی 4: ہر build پر نیا تھیم بنانا۔ اگر ThemeData build طریقہ کے اندر بنایا جاتا ہے، ہر ویجٹ دوبارہ تعمیر ایک نیا تھیم آبجیکٹ بناتا ہے، InheritedWidget آپٹیمائزیشن کو توڑتا ہے۔ حل: ThemeData کو build کے باہر static فیلڈ یا const کنسٹرکٹر میں منتقل کریں۔

خلاصہ: درست تھیمنگ کے لیے مرکزی نقطہ نظر کی ضرورت ہوتی ہے۔ ThemeData کو مستقلات میں منتقل کریں، تھیم سے رنگ سکیمیں استعمال کریں، اور ہمیشہ دونوں تھیم — لائٹ اور ڈارک — متعین کریں۔