AppBar — এটি কি, কনফিগরেশন এবং Flutter উইজেট

Flutter এ AppBar কি

AppBar হল একটি মানক Material উপরের প্যানেল কম্পোনেন্ট যা Scaffold এর শীর্ষে প্রদর্শিত হয়। এটিতে স্ক্রিনের শিরোনাম, একটি নেভিগেশন বাটন (সাধারণত একটি “হ্যামবার্গার” আইকন বা “পিছনে” তীর) এবং কর্ম — আইকন যা সার্চ, সেটিংস বা অন্যান্য কাজ খোলে। AppBar স্বচালিতভাবে প্লেটফর্মের সঙ্গে খাপ খায়: Android এ মানক Material নিচের ছায়া ব্যবহার করে, iOS এ — স্বচ্ছতা সহ একটি চপটা ডিজাইন।

AppBar PreferredSizeWidget ইন্টারফেস বাস্তবায়ন করে, যার অর্থ হল এর উচ্চতা নির্দিষ্ট এবং নির্মাণের আগে জানা যায়। ডিফল্ট হিসাবে, পোর্ট্রেট অরিয়েন্টেশনে Android এ AppBar এর উচ্চতা 56dp এবং iOS এ 44dp, উপরে SafeArea বিবেচনা করে। এই বৈশিষ্ট্যটি Scaffold কে রেন্ডারিংয়ের সময় পুনর্গঠন এড়িয়ে, body এর জন্য উপলব্ধ স্থান আগে থেকে গণনা করতে দেয়।

Flutter Material Library Guide (2026) অনুযায়ী, AppBar বেশ কয়েকটি পুনরাবৃত্তি মধ্য দিয়ে গেছে: Flutter 1.x এ এটি পাঠ সহ একটি সহজ কন্টেনার ছিল, Flutter 2.x এ Material 3 এবং flexibleSpace এর জন্য সমর্থন পেয়েছিল, এবং Flutter 3.x এ — System UI (স্থিতি বারের রঙ, স্বচ্ছতা) এর সঙ্গে ইন্টিগ্রেশন। আধুনিক AppBar Android 12+ ডিভাইসে Material You থেকে Dynamic Color সমর্থন করে।

AppBar গঠন: বৈশিষ্ট্য এবং প্যারামিটার

AppBar প্যারামিটারের একটি সেট প্রদান করে যা উপরের প্যানেলের প্রতিটি অংশ নিয়ন্ত্রণ করে। এই বৈশিষ্ট্যগুলি বোঝা কাস্টম সমাধান না করে যে কোনো ডিজাইন আবশ্যকতার জন্য প্যানেলটিকে নমনীয়ভাবে কাস্টমাইজ করতে দেয়।

Title এবং leading: শিরোনাম এবং নেভিগেশন কনফিগরেশন

title বৈশিষ্ট্যটি যে কোনো উইজেট গ্রহণ করে, কিন্তু সাধারণত TextStyle এর মাধ্যমে শৈলী কনফিগরেশন সহ Text ব্যবহার করা হয়। লম্বা শিরোনামের জন্য, স্থান সীমিত হলে টেক্সট ঠিকমতো ট্রিম হয় সেজন্য title কে Flexible এ মোড়ানোর পরামর্শ করা হয়। leading বৈশিষ্ট্যটি স্পষ্টভাবে সেট না করলে Navigator.push এর মাধ্যমে একটি নেস্টেড স্ক্রিনে যাওয়ার সময় স্বচালিতভাবে BackButton দিয়ে প্রতিস্থাপিত হয়।

Actions: কর্ম আইকনের অবস্থান

actions তালিকায় AppBar এর ডান প্রান্তে সংরেখিত উইজেট থাকে। প্রতিটি উপাদান 48dp (মানক Material Design) এর বেশি চৌড়া হবে না। কর্মগুলি গ্রুপবদ্ধ করতে PopupMenuButton ব্যবহার করুন — এটি কম গুরুত্বপূর্ণ বিকল্পগুলি একটি ড্রপডাউন মেনুতে লুকায় এবং ইন্টারফেস ঘনত্ব সংক্রান্ত Material সুপারিশ মেনে চলে।

AppBar কাস্টমাইজেশন: শৈলী, রঙ এবং আচরণ

AppBar রঙ, ছায়া এবং প্যাডিং বৈশিষ্ট্যের মাধ্যমে গভীর কাস্টমাইজেশন সমর্থন করে। বেসিক স্টাইলিং অ্যাপ থিম থেকে উত্তরাধিকার হয়, কিন্তু প্রতিটি বৈশিষ্ট্য পৃথকভাবে অতিক্রম করা যেতে পারে। আসুন প্রধান কনফিগরেশন দৃশ্যগুলি দেখি।

AppBar এর পৃষ্ঠভূমির রঙ backgroundColor এর মাধ্যমে সেট করা হয়। উল্লেখ না করলে, ThemeData থেকে appBarTheme ব্যবহার করা হয়। Material 3 এ, AppBar এর রঙ স্বচালিতভাবে ColorScheme.primary থেকে গণনা করা হয়, কিন্তু এটি একটি নির্দিষ্ট স্ক্রিনের জন্য অতিক্রম করা যেতে পারে। স্বচ্ছ AppBar (প্রায়ই প্রোফাইলে ব্যবহৃত) এর জন্য, elevation: 0 সহ backgroundColor: Colors.transparent সেট করুন।

elevation বৈশিষ্ট্যটি AppBar এর নীচে ছায়া নিয়ন্ত্রণ করে। মান 0 ছায়া মুছে ফেলে, একটি “চপটা” প্যানেল প্রভাব তৈরি করে, যা Material 3 এর জন্য প্রাসঙ্গিক। মান 4 মানক Material Design ছায়া দেয়। কাস্টম ছায়া নিয়ন্ত্রণের জন্য, shadowColor ব্যবহার করুন — ছায়া রঙ যা প্যানেলকে দৃশ্যভাবে বিষয়বস্তু থেকে আলাদা করে।

AppBar এ টেক্সটের রঙ নিয়ন্ত্রণ করতে foregroundColor ব্যবহার করুন। এই বৈশিষ্ট্যটি শিরোনাম, আইকন এবং actions এর টেক্সটের রঙকে প্রভাবিত করে। backgroundColor পরিবর্তন করার সময় স্বচালিতভাবে একটি বিপরীত foregroundColor নির্বাচিত হয়, কিন্তু অসাধারণ ডিজাইনের জন্য এটি বাধ্যকর করা যেতে পারে।

SliverAppBar: AppBar এর এনিমেটেড সংস্করণ

SliverAppBar হল CustomScrollView এর ভিতরে ব্যবহারের জন্য AppBar এর একটি বিস্তার যা স্ক্রোল এনিমেশন সমর্থন করে: সংকোচন, প্যারালাক্স প্রভাব এবং পিন মোড। মানক AppBar এর বিপরীতে, SliverAppBar হল একটি sliver উইজেট এবং স্ক্রোল অবস্থানের উপর নির্ভর করে গতিশীলভাবে আকার পরিবর্তন করতে পারে।

SliverAppBar এর প্রধান মোডগুলি pinned, floating এবং snap বৈশিষ্ট্যের সমন্বয়ে নির্ধারিত হয়। pinned মোডে, প্যানেলটি সবসময় স্ক্রিনের উপরে দৃশ্যমান থাকে। floating মোডে, এটি পিছনে স্ক্রোল করার সময় দৃশ্যমান হয়। floating + snap সমন্বয় একটি “আটকো” প্যানেল আচরণ তৈরি করে যা সামান্য উপরের স্ক্রোলে দৃশ্যমান হয়, প্রায়ই সংবাদ ফিডে ব্যবহৃত।

Flutter API SliverAppBar (2026) অনুযায়ী, SliverAppBar ব্যবহার করার জন্য একটি নির্দিষ্ট ListView বা Column কে sliver উইজেট সহ CustomScrollView দিয়ে প্রতিস্থাপন করা প্রয়োজন। Scaffold সঠিকভাবে কাজ করতে থাকে, কিন্তু Scaffold এর appBar বৈশিষ্ট্যটি null হতে হবে — SliverAppBar CustomScrollView এর ভিতরে প্রথম sliver হিসাবে রাখা হয়।

অ্যাপ্লিকেশনে AppBar কনফিগরেশন উদাহরণ

আসুন সার্চ, ড্রপডাউন মেনু এবং TabBar সহ AppBar এর একটি উদাহরণ দেখি। এই কোডটি Flutter এ একটি প্রোডাক্শন অ্যাপ্লিকেশনে একটি টাইপিকাল উপরের প্যানেল কনফিগরেশন প্রদর্শন করে।

Scaffold(
  appBar: AppBar(
    title: const Text('ক্যাটালগ'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('সেটিংস')),
          const PopupMenuItem(value: 'about', child: Text('অ্যাপ সম্পর্কে')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

উদাহরণে, AppBar এ একটি কেন্দ্রিত শিরোনাম, বামে একটি Drawer খোলার বাটন, একটি সার্চ আইকন এবং ডানে একটি ড্রপডাউন মেনু রয়েছে। TabBar নিচে পণ্য বিভাগগুলির মধ্যে স্যুইচ করার অনুমতি দেয়। এই কনফিগরেশন বেশিরভাগ মোবাইল অ্যাপ্লিকেশন দৃশ্য অন্তর্ভুক্ত করে: নেভিগেশন, সার্চ, অতিরিক্ত বিকল্প এবং বিভাগ স্যুইচিং — সব একটি উপরের প্যানেলে।