Drawer এবং Bottom Navigation Bar তৈরি

Flutter-এ Drawer এবং Bottom Navigation Bar ব্যবহার করে আপনি একটি পূর্ণাঙ্গ নেভিগেশন সিস্টেম তৈরি করতে পারেন, যা অ্যাপ্লিকেশনের বিভিন্ন স্ক্রিনের মধ্যে যাতায়াত করতে ব্যবহারকারীদের জন্য সহজ করে তোলে। এখানে Drawer এবং Bottom Navigation Bar তৈরি করার বিস্তারিত ধাপ এবং উদাহরণ দেওয়া হলো:

১. Drawer তৈরি করা

Drawer হলো একটি সাইড নেভিগেশন মেনু, যা সাধারণত অ্যাপ্লিকেশনের বাম পাশ থেকে স্লাইড করে আসে। এটি ব্যবহারকারীদের জন্য বিভিন্ন পেজে দ্রুত নেভিগেট করার সুবিধা প্রদান করে।

উদাহরণ: Drawer তৈরি করা

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () {
                Navigator.pop(context); // Drawer বন্ধ করে দেয়
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () {
                Navigator.pop(context); // Drawer বন্ধ করে দেয়
              },
            ),
            ListTile(
              leading: Icon(Icons.info),
              title: Text('About'),
              onTap: () {
                Navigator.pop(context); // Drawer বন্ধ করে দেয়
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Drawer Example'),
      ),
    );
  }
}

কোডের ব্যাখ্যা:

• drawer: Scaffold এর একটি প্রপার্টি যা Drawer যোগ করতে ব্যবহার করা হয়।
• Drawer: Drawer উইজেটের মধ্যে আমরা একটি ListView ব্যবহার করেছি, যাতে বিভিন্ন ListTile ব্যবহার করে নেভিগেশন আইটেমগুলো যোগ করা হয়েছে।
• DrawerHeader: Drawer-এর উপরের অংশের জন্য ব্যবহার করা হয়, যেখানে আপনি অ্যাপের নাম বা লোগো প্রদর্শন করতে পারেন।
• ListTile: প্রতিটি ListTile একটি নেভিগেশন আইটেম হিসেবে ব্যবহৃত হয়েছে। onTap ইভেন্টে Navigator.pop(context) ব্যবহার করে Drawer বন্ধ করা হয়েছে।

২. Bottom Navigation Bar তৈরি করা

Bottom Navigation Bar হলো একটি নেভিগেশন মেনু যা অ্যাপের নিচের দিকে থাকে এবং সাধারণত ২-৫টি আইটেম থাকে। এটি ব্যবহারকারীদের দ্রুত বিভিন্ন পেজে নেভিগেট করতে সহায়ক।

উদাহরণ: Bottom Navigation Bar তৈরি করা

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavExample(),
    );
  }
}

class BottomNavExample extends StatefulWidget {
  @override
  _BottomNavExampleState createState() => _BottomNavExampleState();
}

class _BottomNavExampleState extends State<BottomNavExample> {
  int _currentIndex = 0;

  // স্ক্রিনগুলোর তালিকা
  final List<Widget> _screens = [
    HomeScreen(),
    SettingsScreen(),
    AboutScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Example'),
      ),
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index; // নির্বাচিত ইনডেক্স আপডেট করা
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info),
            label: 'About',
          ),
        ],
      ),
    );
  }
}

// Home Screen Widget
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Screen'),
    );
  }
}

// Settings Screen Widget
class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Settings Screen'),
    );
  }
}

// About Screen Widget
class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('About Screen'),
    );
  }
}

কোডের ব্যাখ্যা:

• _currentIndex: বর্তমান নির্বাচিত আইটেমের ইনডেক্স ট্র্যাক করার জন্য একটি ভেরিয়েবল।
• _screens: স্ক্রিনগুলোর একটি তালিকা যা বর্তমান নির্বাচিত ইনডেক্স অনুসারে প্রদর্শন করা হয়।
• BottomNavigationBar:
  • currentIndex: বর্তমান নির্বাচিত আইটেমের ইনডেক্স।
  • onTap: ব্যবহারকারী যখন একটি আইটেমে ক্লিক করে, তখন ইনডেক্স আপডেট করে স্ক্রিন পরিবর্তন করা হয়।
  • BottomNavigationBarItem: প্রতিটি আইটেমের জন্য আইকন এবং লেবেল দেওয়া হয়েছে।

Drawer এবং Bottom Navigation Bar এর সাধারণ টিপস:

1. সঠিক আইকন ব্যবহার করুন: ব্যবহারকারীর জন্য নেভিগেশন সহজ করতে প্রতিটি আইটেমের জন্য সংশ্লিষ্ট আইকন ব্যবহার করুন।
2. স্ক্রিন সুইচিং: Bottom Navigation Bar ব্যবহার করার সময় setState ব্যবহার করে ইনডেক্স আপডেট করে স্ক্রিন পরিবর্তন করুন।
3. Drawer: অ্যাপ্লিকেশনে বিভিন্ন লিঙ্ক এবং অপশন সহজে অ্যাক্সেস করার জন্য Drawer ব্যবহার করতে পারেন।

এভাবে, Drawer এবং Bottom Navigation Bar ব্যবহার করে আপনি Flutter-এ একটি পূর্ণাঙ্গ এবং ব্যবহারবান্ধব নেভিগেশন সিস্টেম তৈরি করতে পারবেন।