MaterialApp: এটি কী এবং রুট উইজেট কীভাবে সেটআপ করবেন

Flutter-এ MaterialApp কী?

MaterialApp একটি র্যাপার উইজেট যা Flutter অ্যাপ্লিকেশনে Material Design আরম্ভ করে। এটি Widget Tree-এর মূল এবং চাইল্ড উইজেটগুলিকে সিস্টেম পরিষেবাগুলিতে অ্যাক্সেস প্রদান করে: নেভিগেশন, থিম, মিডিয়া কোয়েরি এবং লোকালাইজেশন। MaterialApp ছাড়া, অ্যাপ্লিকেশনটির স্ট্যান্ডার্ড Material শৈলী থাকবে না এবং এটি Scaffold, AppBar, FloatingActionButton এবং BottomNavigationBar-এর মতো উইজেট ব্যবহার করতে পারবে না।

MaterialApp Widget Tree-তে কী যোগ করে

MaterialApp ব্যবহার করার সময়, Flutter স্বয়ংক্রিয়ভাবে ট্রির মূলে বেশ কয়েকটি মূল উইজেট যোগ করে: Navigator (নেভিগেশনের জন্য স্ক্রিন স্ট্যাক), Theme (রঙের স্কিম এবং শৈলী), MediaQuery (ডিভাইস তথ্য), Localizations (স্থানীয়কৃত স্ট্রিং), Directionality (টেক্সট দিকনির্দেশনা)। এই উইজেটগুলি InheritedWidget হিসাবে প্রয়োগ করা হয় এবং অ্যাপ্লিকেশনের যে কোনো জায়গায় BuildContext-এর মাধ্যমে অ্যাক্সেসযোগ্য।

মৌলিক ব্যবহার

MaterialApp-এর ন্যূনতম কনফিগারেশনে শুধুমাত্র home প্যারামিটারের প্রয়োজন — উইজেট যা মূল স্ক্রিনে প্রদর্শিত হয়। Flutter স্বয়ংক্রিয়ভাবে home-কে Scaffold-এ মোড়ানো করে যদি এটি ইতিমধ্যে Scaffold না হয়, WidgetsBinding প্রক্রিয়ার মাধ্যমে। যখন আপনি runApp(MaterialApp(home: MyHomePage())) দিয়ে অ্যাপ্লিকেশন চালু করেন, Flutter MaterialApp-কে মূল হিসাবে একটি রুট Widget Tree তৈরি করে।

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

এই উদাহরণে, MaterialApp মৌলিক থিম (হালকা এবং গাঢ়), শিরোনাম এবং মূল স্ক্রিন কনফিগার করে। প্যারামিটার title উইন্ডো শিরোনাম (ডেস্কটপে) এবং অ্যাক্সেসিবিলিটির জন্য ব্যবহৃত হয়। প্যারামিটার theme এবং darkTheme বিভিন্ন মোডে অ্যাপ্লিকেশনের চেহারা নির্ধারণ করে।

MaterialApp-এর গঠন এবং প্যারামিটার

MaterialApp 30টিরও বেশি প্যারামিটার গ্রহণ করে, যা বিভাগগুলিতে বিভক্ত: Material Design সেটিংস, রাউটিং, থিমিং, লোকালাইজেশন, ত্রুটি আচরণ এবং প্ল্যাটফর্ম-নির্দিষ্ট সেটিংস। মূল প্যারামিটারগুলি জানা আপনাকে অতিরিক্ত কোড না লিখে অ্যাপ্লিকেশনটি নমনীয়ভাবে কনফিগার করতে দেয়।

প্রধান কনফিগারেশন প্যারামিটার

প্যারামিটার title উইন্ডো শিরোনাম এবং অ্যাক্সেসিবিলিটির জন্য অ্যাপ্লিকেশনের নাম সেট করে। color Android-এ টাস্ক সুইচারের জন্য অ্যাপ্লিকেশনের রঙ নির্ধারণ করে। debugShowCheckedModeBanner রিলিজ বিল্ডে ডিবাগ মোড ব্যানার লুকিয়ে রাখে। showPerformanceOverlay কর্মক্ষমতা তথ্য সহ একটি ওভারলে সক্ষম করে। supportDarkTheme নির্দেশ করে যে অ্যাপ্লিকেশনটি ডার্ক থিম সমর্থন করে কিনা।

প্ল্যাটফর্ম-নির্দিষ্ট প্যারামিটার

MaterialApp বিভিন্ন প্ল্যাটফর্মে আচরণ কনফিগার করার জন্য প্যারামিটার প্রদান করে: restorationScopeId Android-এ পুনরায় চালু করার সময় অ্যাপ্লিকেশন অবস্থা সংরক্ষণের জন্য, scrollBehavior বিভিন্ন OS-এ স্ক্রোল আচরণ কনফিগার করার জন্য, useMaterial3 Material 3 (Material You) সক্ষম করার জন্য। Material 3 ডায়নামিক রঙ, নতুন কম্পোনেন্ট এবং আপডেটেড শৈলী যোগ করে।

theme এবং darkTheme-এর সাথে থিমিং

থিমিং MaterialApp-এর প্রধান প্যারামিটারগুলির মধ্যে একটি। প্যারামিটার theme একটি ThemeData অবজেক্ট গ্রহণ করে যা হালকা থিমের জন্য রঙের প্যালেট, টাইপোগ্রাফি, কম্পোনেন্ট আকার এবং আইকনোগ্রাফি নির্ধারণ করে। প্যারামিটার darkTheme গাঢ় থিমের জন্য সমতুল্য কনফিগারেশন। Flutter ডিভাইসের সিস্টেম সেটিংসের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে থিম পরিবর্তন করে।

ThemeData: রঙের স্কিম

ThemeData-তে primarySwatch (প্রাথমিক রঙ), colorScheme (বর্ধিত Material 3 রঙের স্কিম), brightness (হালকা বা গাঢ়), fontFamily (ডিফল্ট ফন্ট), textTheme (টেক্সট শৈলী), cardTheme, appBarTheme, buttonTheme এবং নির্দিষ্ট কম্পোনেন্ট কাস্টমাইজ করার জন্য আরও ডজনখানেক প্যারামিটার অন্তর্ভুক্ত রয়েছে। Material 3-এর জন্য colorScheme এবং Material 2-এর জন্য primarySwatch ব্যবহার করুন।

Material 3 ডায়নামিক রঙ

Material 3 (Material You) ডায়নামিক রঙ সমর্থন করে, যা Android 12+ ডিভাইসের ওয়ালপেপার থেকে নেওয়া হয়। এটি সক্ষম করতে, useMaterial3: true সেট করুন এবং colorScheme.fromSeed বা colorScheme.fromImageProvider ব্যবহার করুন। ডায়নামিক রঙ স্বয়ংক্রিয়ভাবে 5টি টোনের একটি সুরেলা প্যালেট তৈরি করে: primary, secondary, tertiary, neutral এবং neutralVariant।

উইজেটে থিম অ্যাক্সেস

যেকোনো উইজেট Theme.of(context)-এর মাধ্যমে বর্তমান থিম অ্যাক্সেস করতে পারে। Theme.of একটি ThemeData অবজেক্ট ফেরত দেয় যা থেকে আপনি colors, textTheme এবং অন্যান্য প্যারামিটার পেতে পারেন। থিম পরিবর্তনের সাবস্ক্রাইব করতে (উদাহরণস্বরূপ, হালকা এবং গাঢ় মোডের মধ্যে স্যুইচ করার সময়), build পদ্ধতির ভিতরে কনটেক্সট ব্যবহার করুন — Flutter থিম পরিবর্তন হলে স্বয়ংক্রিয়ভাবে উইজেট পুনর্নির্মাণ করবে।

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

এই উদাহরণে, Theme.of(context) নিকটতম MaterialApp থেকে বর্তমান থিম পায়। পটভূমির রঙ এবং টেক্সট শৈলী স্বয়ংক্রিয়ভাবে বর্তমান থিমের (হালকা বা গাঢ়) সাথে মেলে। থিম স্যুইচ করার সময়, Container এবং Text আপডেট করা ThemeData থেকে নতুন মান সহ পুনর্নির্মিত হবে।

MaterialApp-এ রাউটিং এবং নেভিগেশন

MaterialApp Navigator-কে একীভূত করে — একটি স্ট্যাক-ভিত্তিক নেভিগেটর যা স্ক্রিনের মধ্যে স্থানান্তর পরিচালনা করে। প্যারামিটার initialRoute, routes এবং onGenerateRoute নির্ধারণ করে কিভাবে Flutter নেভিগেশন হ্যান্ডেল করে। Navigator.push এবং Navigator.pushReplacement প্রোগ্রামেটিকভাবে স্ক্রিন পরিবর্তন করতে দেয়, যখন Navigator.pop ফিরে যেতে দেয়।

নামকৃত রুট (routes)

প্যারামিটার routes একটি Map<String, WidgetBuilder> গ্রহণ করে, যেখানে কী হল রুটের নাম (স্ট্রিং) এবং মান হল ফাংশন যা সেই স্ক্রিনের জন্য উইজেট তৈরি করে। নামকৃত রুট স্ট্যাটিক নেভিগেশনের জন্য সুবিধাজনক: '/' (রুট রুট) সাধারণত home-এর সাথে মেলে, '/settings', '/profile' — অন্যান্য স্ক্রিন। Navigator.pushNamed(context, '/settings') সেটিংস স্ক্রিনে নেভিগেট করে।

রুট জেনারেশন (onGenerateRoute)

onGenerateRoute একটি ফাংশন যা কল করা হয় যখন routes-এ কোনো রুট পাওয়া যায় না। এটি RouteSettings গ্রহণ করে এবং MaterialPageRoute ফেরত দেয়। এই পদ্ধতিটি ডায়নামিক নেভিগেশনের জন্য কার্যকর যখন রুট ডেটার উপর নির্ভর করে (উদাহরণস্বরূপ, /user/42)। onGenerateRoute রুটের নাম পার্স করে, প্যারামিটার বের করে এবং উপযুক্ত স্ক্রিন তৈরি করে।

ডিপ লিংক এবং নামকৃত রাউটিং

ডিপ লিংক (deep links) সমর্থনের জন্য, onGenerateInitialRoute এবং onGenerateRoute প্যারামিটার একসাথে ব্যবহার করুন। ডিপ লিংক URL-এর মাধ্যমে অ্যাপ্লিকেশনের একটি নির্দিষ্ট স্ক্রিন খোলার অনুমতি দেয় (উদাহরণস্বরূপ, https://example.com/promo)। Flutter Android-এ (intent filters-এর মাধ্যমে) এবং iOS-এ (universal links-এর মাধ্যমে) ডিপ লিংক হ্যান্ডেল করে এবং পথটি onGenerateRoute-এ পাঠায়।

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

এই উদাহরণে, onGenerateRoute /user/42-এর মতো ডায়নামিক রুট হ্যান্ডেল করে। যদি রুটটি স্ট্যাটিক routes-এ না পাওয়া যায় এবং ডায়নামিক প্যাটার্নের সাথে না মেলে, Flutter একটি ত্রুটি পৃষ্ঠা প্রদর্শন করে, যা onUnknownRoute-এর মাধ্যমে কাস্টমাইজ করা যেতে পারে।

লোকালাইজেশন এবং আন্তর্জাতিকীকরণ

MaterialApp প্যারামিটার localizationsDelegates এবং supportedLocales-এর মাধ্যমে বিল্ট-ইন লোকালাইজেশন সমর্থন প্রদান করে। LocalizationsDelegates স্থানীয়কৃত স্ট্রিং লোড করে, এবং supportedLocales নির্ধারণ করে অ্যাপ্লিকেশনটি কোন ভাষাগুলি সমর্থন করে। Flutter স্বয়ংক্রিয়ভাবে ডিভাইসের ভাষা সনাক্ত করে এবং সংশ্লিষ্ট স্থানীয়কৃত রিসোর্স লোড করে।

supportedLocales এবং localizationsDelegates কনফিগার করা

প্যারামিটার supportedLocales Locales-এর একটি তালিকা গ্রহণ করে যা অ্যাপ্লিকেশন সমর্থন করে: [const Locale('en'), const Locale('ru'), const Locale('de')]। localizationsDelegates ডেলিগেটদের একটি তালিকা যা স্থানীয়কৃত স্ট্রিং লোড করে। Material Design-এর জন্য, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate এবং GlobalCupertinoLocalizations.delegate যোগ করুন।

অ্যাপ্লিকেশন স্ট্রিং-এর লোকালাইজেশন

নিজের স্ট্রিংগুলি স্থানীয়করণ করতে, AppLocalizations ক্লাস ব্যবহার করুন, যা flutter_localizations বা intl প্যাকেজের মাধ্যমে তৈরি করা হয়েছে। AppLocalizations স্থানীয়কৃত স্ট্রিং অ্যাক্সেস করার জন্য স্ট্যাটিক মেথড প্রদান করে: AppLocalizations.of(context)!.helloMessage। MaterialApp স্বয়ংক্রিয়ভাবে Localizations-কে Widget Tree-তে পাঠায়, যা কনটেক্সটের মাধ্যমে অ্যাক্সেসযোগ্য করে তোলে।

• flutter_localizations — Material উইজেট এবং সিস্টেম স্ট্রিং স্থানীয়করণের জন্য অফিসিয়াল প্যাকেজ।
• intl — আন্তর্জাতিকীকরণের জন্য প্যাকেজ: সংখ্যা, তারিখ, মুদ্রা এবং বহুবচন ফর্ম্যাটিং।
• ARB ফাইল — স্থানীয়কৃত স্ট্রিং সংরক্ষণের ফর্ম্যাট, যা flutter_localizations এবং intl ব্যবহার করে।

MaterialApp বনাম CupertinoApp বনাম WidgetsApp

Flutter বিভিন্ন প্ল্যাটফর্ম এর জন্য তিনটি রুট উইজেট প্রদান করে: MaterialApp (Android এবং ওয়েবের জন্য Material Design), CupertinoApp (iOS শৈলী) এবং WidgetsApp (স্টাইলিং ছাড়া বেসিক উইজেট)। রুট উইজেটের পছন্দ সম্পূর্ণ অ্যাপ্লিকেশনের চেহারা এবং প্ল্যাটফর্ম-নির্দিষ্ট কম্পোনেন্টের প্রাপ্যতা নির্ধারণ করে।

MaterialApp: সার্বজনীন পছন্দ

MaterialApp Material Design সমর্থনের কারণে বেশিরভাগ অ্যাপ্লিকেশনের জন্য উপযুক্ত, যা Android, ওয়েব এবং ডেস্কটপে দুর্দান্ত দেখায়। Material Design একটি সমৃদ্ধ কম্পোনেন্ট লাইব্রেরি প্রদান করে: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog এবং আরও অনেকগুলি। MaterialApp ডায়নামিক রঙ সহ Material 3-কেও সমর্থন করে।

CupertinoApp: iOS শৈলী

CupertinoApp Cupertino Design ব্যবহার করে, যা Apple-এর Human Interface Guidelines অনুসরণ করে। এটি CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar এবং অন্যান্য iOS-শৈলীর কম্পোনেন্ট প্রদান করে। iOS অ্যাপ্লিকেশন বা সমস্ত প্ল্যাটফর্মে Apple শৈলী অনুসরণকারী অ্যাপ্লিকেশনের জন্য CupertinoApp ব্যবহার করুন।

WidgetsApp: ন্যূনতম মূল

WidgetsApp স্টাইলিং ছাড়া বেসিক রুট উইজেট। এটি Navigator, MediaQuery এবং Localizations যোগ করে, কিন্তু থিম বা Material/Cupertino কম্পোনেন্ট প্রদান করে না। WidgetsApp কাস্টম ডিজাইন সিস্টেম, গেম বা নিজস্ব স্টাইলিং সহ অ্যাপ্লিকেশনের জন্য উপযুক্ত যেখানে Material বা Cupertino অতিরিক্ত।