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-এ ১২টি প্রধান রঙ রয়েছে: 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 ১৫টি টেক্সট স্টাইল নির্ধারণ করে: 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 static ফিল্ড বা build-এর বাইরে const কনস্ট্রাক্টরে সরান।

উপসংহার: সঠিক থিমিংয়ের জন্য একটি কেন্দ্রীভূত পদ্ধতি প্রয়োজন। ThemeData ধ্রুবকে সরান, থিম থেকে রঙের স্কিম ব্যবহার করুন, এবং সর্বদা উভয় থিম — হালকা এবং গাঢ় — সংজ্ঞায়িত করুন।