Scaffold: এটি কী, গঠন এবং Flutter-এ উইজেটসমূহ

Flutter-এ Scaffold কী

Scaffold হল Material Design লাইব্রেরির একটি লেআউট উইজেট যা স্ক্রিনের মৌলিক ভিজুয়াল গঠন তৈরি করে। এটি মানক Material অ্যাপ্লিকেশন প্যাটার্ন বাস্তবায়ন করে: শীর্ষ বার, স্ক্রিন বডি, সাইড মেনু এবং ফ্লোটিং বাটন। Container-এর বিপরীতে, যা কেবল মাত্রা এবং শৈলী সেট করে, Scaffold পুরো স্ক্রিনটিকে একটি একীভূত সিস্টেম হিসেবে পরিচালনা করে।

Material Design-এ তৈরি প্রতিটি Flutter অ্যাপ্লিকেশন MaterialApp দিয়ে শুরু হয়, যার ভিতরে প্রতিটি স্ক্রিন Scaffold-এ মোড়ানো থাকে। Scaffold-ই সব ডিভাইসে AppBar-এর সঠিক প্রদর্শন নিশ্চিত করে, iPhone X এবং তার উপরের জন্য SafeArea বিবেচনা করে। এটি z-ক্রমের জন্যও দায়ী: Drawer body-র উপরে প্রদর্শিত হয় এবং SnackBar পুরো ইন্টারফেসের উপরে কিন্তু ডায়ালগ উইন্ডোর নিচে দেখা যায়।

অফিসিয়াল Flutter API রেফারেন্স (2026) অনুযায়ী, SnackBar, BottomSheet এবং PersistentBottomSheet-এর মতো উইজেটগুলির সঠিক পরিচালনার জন্য Scaffold একটি বাধ্যতামূলক প্রয়োজনীয়তা। Scaffold ছাড়া, এই উপাদানগুলি ব্যতিক্রম ছোড়ে কারণ তারা Scaffold কনটেক্সট অ্যাক্সেস করতে InheritedWidget Scaffold.of-এর উপর নির্ভর করে। তাই, Scaffold-এর পরিবর্তে সরাসরি Container-এ যেকোনো বিষয়বস্তু রাখা শিক্ষানবিশ ডেভেলপারদের একটি সাধারণ ভুল, যা Material কার্যকারিতা হারানোর দিকে নিয়ে যায়।

উইজেট শ্রেণিবিন্যাসে Scaffold

একটি সাধারণ Flutter অ্যাপ্লিকেশনে, Scaffold MaterialApp-এর ভিতরে অবস্থিত, সাধারণত ক্রস-প্ল্যাটফর্ম ডেভেলপমেন্টে WidgetsApp বা CupertinoApp-এর নিচে। MaterialApp Navigator এবং থিম তৈরি করে, যখন Scaffold বর্তমান স্ক্রিনের গঠন নির্ধারণ করে। প্রতিটি স্ক্রিনের নিজস্ব Scaffold অনন্য AppBar, Drawer এবং BottomNavigationBar-সহ থাকতে পারে, যা একটি নির্দিষ্ট পৃষ্ঠার জন্য ইন্টারফেসের নমনীয় কাস্টমাইজেশন অনুমতি দেয়।

গভীর কাস্টমাইজেশনের জন্য, Scaffold-কে NestedScrollView-এর সাথে সংযুক্ত করা যেতে পারে — এটি জটিল স্ক্রল প্রভাব বাস্তবায়নের অনুমতি দেয়, যেমন প্যারালাক্স প্রভাবসহ সংকুচিত হওয়া AppBar। তবে, বেশিরভাগ ক্ষেত্রে, মানক Scaffold তার বৈশিষ্ট্যসহ প্রোডাকশন-রেডি স্ক্রিন তৈরির জন্য যথেষ্ট।

Scaffold গঠন: কাঠামোর মূল অংশগুলি

Scaffold বেশ কয়েকটি বাধ্যতামূলক এবং ঐচ্ছিক অঞ্চল নিয়ে গঠিত, প্রতিটি ইন্টারফেসের একটি নির্দিষ্ট অংশের জন্য দায়ী। চলুন প্রতিটি অংশ আলাদাভাবে দেখি কীভাবে তারা একে অপরের সাথে যোগাযোগ করে তা বোঝার জন্য।

AppBar — শীর্ষ বার

AppBar হল স্ক্রিনের শীর্ষ বার যা শিরোনাম, নেভিগেশন বাটন এবং ক্রিয়া প্রদর্শন করে। এটি স্বয়ংক্রিয়ভাবে 56dp-এর সঠিক উচ্চতা পায় এবং নচযুক্ত ডিভাইসের জন্য SafeArea বিবেচনা করে। TabBar-কে bottom প্রপার্টি ব্যবহার করে ট্যাব পরিবর্তনের জন্য AppBar-এ এম্বেড করা যেতে পারে।

Drawer — সাইড মেনু

Drawer হল একটি প্যানেল যা বাম দিক থেকে স্লাইড করে বের হয় এবং অ্যাপ্লিকেশনের বিভাগগুলির মাধ্যমে নেভিগেশন প্রদান করে। drawer প্রপার্টি সেট করা থাকলে Scaffold স্বয়ংক্রিয়ভাবে AppBar-এ একটি হ্যামবার্গার আইকন যোগ করে। Drawer-এ DrawerHeader, মেনু আইটেমসহ ListView এবং ব্যবহারকারীর তথ্য থাকতে পারে।

BottomNavigationBar — নিচের নেভিগেশন

BottomNavigationBar হল প্রধান বিভাগগুলির মধ্যে পরিবর্তনের জন্য স্ক্রিনের নিচের অংশের একটি প্যানেল। এতে লেবেলসহ 2 থেকে 5টি আইকন থাকে এবং NavigationBar-এর মাধ্যমে সক্রিয় নির্দেশনা-সহ Material 3 সমর্থন করে। Scaffold এটি স্ক্রিনের নিচে অবস্থান করে, স্বয়ংক্রিয়ভাবে body-কে উপরে সরিয়ে দেয় যাতে বিষয়বস্তু ওভারল্যাপ না হয়।

FloatingActionButton — ফ্লোটিং অ্যাকশন বাটন

FloatingActionButton হল স্ক্রিনের নিচের ডান কোণায় রাখা একটি গোল বাটন। এটি স্ক্রিনের মূল ক্রিয়ার জন্য ব্যবহৃত হয়, যেমন নতুন এন্ট্রি যোগ করা বা বার্তা পাঠানো। Scaffold extended বৈশিষ্ট্যের মাধ্যমে বর্ধিত অ্যানিমেশন-সহ একাধিক FAB সমর্থন করে।

Body — মূল বিষয়বস্তু

Body হল স্ক্রিনের কেন্দ্রীয় এলাকা যেখানে মূল বিষয়বস্তু রাখা হয়। body হিসেবে যেকোনো উইজেট কাজ করতে পারে: Column, ListView, GridView, Stack বা কাস্টম কম্পোজিশন। Scaffold স্বয়ংক্রিয়ভাবে AppBar, BottomNavigationBar এবং SafeArea বিবেচনা করে body-র উচ্চতা গণনা করে, যা ম্যানুয়াল আকার সমন্বয়ের প্রয়োজনীয়তা দূর করে।

Scaffold-এর প্রধান বৈশিষ্ট্যসমূহ

Scaffold স্ক্রিনের চেহারা এবং আচরণ কাস্টমাইজ করার জন্য 30টিরও বেশি বৈশিষ্ট্য প্রদান করে। এগুলির মধ্যে বাধ্যতামূলক (body) এবং ঐচ্ছিক উভয়ই রয়েছে যা মার্জিন, পটভূমি এবং কীবোর্ড অবস্থা নিয়ন্ত্রণ করে। প্রতিটি বৈশিষ্ট্য বোঝা ডিজাইনের প্রয়োজনীয়তা অনুযায়ী ইন্টারফেস সঠিকভাবে কনফিগার করতে সাহায্য করে।

resizeToAvoidBottomInset বৈশিষ্ট্য ফর্ম নিয়ে কাজ করার সময় বিশেষভাবে গুরুত্বপূর্ণ: যখন এটি true (ডিফল্ট) এ সেট করা থাকে, Scaffold কীবোর্ড দেখা গেলে স্বয়ংক্রিয়ভাবে body সংকুচিত করে, ইনপুট ফিল্ড দৃশ্যমান রাখে। এটি কাস্টম কীবোর্ড শ্রোতা লেখার প্রয়োজনীয়তা দূর করে। SingleChildScrollView-সহ কাস্টম পরিস্থিতির জন্য, বৈশিষ্ট্যটি নিষ্ক্রিয় করা যেতে পারে।

একটি অ্যাপ্লিকেশনে Scaffold ব্যবহারের উদাহরণ

আসুন Material উপাদানগুলির সম্পূর্ণ সেট-সহ Scaffold-এর একটি ব্যবহারিক উদাহরণ দেখি। কোডটি AppBar, Drawer, BottomNavigationBar, FloatingActionButton এবং SnackBar-সহ একটি স্ক্রিন তৈরি করে — Flutter-এ একটি সাধারণ মোবাইল অ্যাপ্লিকেশন গঠন।

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('আমার অ্যাপ'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('মেনু')),
            ListTile(title: const Text('সেটিংস'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('ক্রিয়া সম্পন্ন')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

উদাহরণটি পুরানো BottomNavigationBar-এর পরিবর্তে Material 3-এর NavigationBar ব্যবহার করে। Scaffold স্বয়ংক্রিয়ভাবে সমস্ত অংশ সংযুক্ত করে: Drawer খুললে SnackBar লুকিয়ে যায়; ট্যাব পরিবর্তন করলে body আপডেট হয়; এবং FloatingActionButton নিজের জায়গায় থাকে। ScaffoldMessenger শ্রেণিবিন্যাসে একাধিক Scaffold থাকলেও SnackBar প্রদর্শন নিশ্চিত করে।

Scaffold এবং Material 3: কনফিগারেশন বৈশিষ্ট্য

Material 3 (M3) হল Google-এর 2023 সালে প্রবর্তিত Material Design-এর বিবর্তন। M3-এ Scaffold বেশ কয়েকটি পরিবর্তন পেয়েছে: BottomNavigationBar-এর পরিবর্তে একটি নতুন NavigationBar উইজেট, ColorScheme.fromSeed-এর মাধ্যমে ডায়নামিক কালার সমর্থন এবং মার্জিন ও উপাদানের উচ্চতার জন্য আপডেটেড সুপারিশ। M3-তে স্যুইচ করতে Scaffold প্রতিস্থাপনের প্রয়োজন নেই — শুধু অ্যাপ্লিকেশন থিম আপডেট করুন।

একটি প্রকল্পে Material 3 সক্ষম করতে, ThemeData-তে useMaterial3: true সেট করা প্রয়োজন। Scaffold স্বয়ংক্রিয়ভাবে ভিজুয়াল স্টাইল অভিযোজিত করে: মার্জিন বড় হয় (16dp-এর পরিবর্তে 24dp), রঙ বীজ রঙ থেকে পুনর্গণনা করা হয়, এবং FloatingActionButton গোলাকার কোণাসহ বড় আকার পায়। একই সাথে, সমস্ত বিদ্যমান Scaffold বৈশিষ্ট্য কার্যকর থাকে।

Material Design 3 স্পেসিফিকেশন (2026) অনুযায়ী, BottomNavigationBar-এর পরিবর্তে তিন থেকে পাঁচটি আইটেম-সহ NavigationBar ব্যবহার করার সুপারিশ করা হয়। Scaffold উভয় বিকল্প সমর্থন করে, কিন্তু NavigationBar Pixel ডিভাইসে অভিযোজনযোগ্যতা এবং Material You-এর জন্য ভালো সমর্থন প্রদান করে।

Material 3-এর জন্য Scaffold কনফিগার করা

M3-সহ Scaffold-এর সঠিক পরিচালনার জন্য, থিম আপডেট করা এবং BottomNavigationBar-কে NavigationBar দিয়ে প্রতিস্থাপন করা যথেষ্ট। রঙ স্বয়ংক্রিয়ভাবে ColorScheme.fromSeed-এর মাধ্যমে গণনা করা হবে, এবং Scaffold মার্জিন নতুন মান অনুযায়ী সমন্বয় করবে। প্রয়োজন হলে, backgroundColor সরাসরি ওভাররাইড করা যেতে পারে।