Navigation এবং Routes

Flutter এ Navigation এবং Routes হলো অ্যাপ্লিকেশনের বিভিন্ন স্ক্রিন বা পৃষ্ঠার মধ্যে নেভিগেট করার পদ্ধতি। এগুলোর মাধ্যমে আপনি অ্যাপের মধ্যে স্ক্রিন পরিবর্তন, ডেটা পাঠানো, এবং স্ট্যাকের মাধ্যমে স্ক্রিন গঠন করতে পারেন। Navigation এবং Routes ব্যবহার করে একটি মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করা যায় যেখানে বিভিন্ন পৃষ্ঠার মধ্যে লজিক্যাল সংযোগ থাকে।

Routes:

Routes হলো Flutter এ স্ক্রিন বা পৃষ্ঠার নাম, যা MaterialApp এর মাধ্যমে কনফিগার করা হয়। প্রতিটি Route একটি Widget এর সাথে যুক্ত থাকে, যা ওই Route তে গেলে প্রদর্শিত হয়।

Navigation:

Navigation হলো Route এর মধ্যে নেভিগেট করার প্রক্রিয়া। Flutter এ Navigation এর জন্য Navigator ক্লাস ব্যবহার করা হয়, যা একটি স্ট্যাক (stack) এর মতো কাজ করে।

Flutter এ Route এবং Navigation এর প্রধান পদ্ধতি:

১. নির্দিষ্ট স্ক্রিনে নেভিগেট করা (পুশ):

Flutter এ স্ক্রিনের মধ্যে নেভিগেট করার জন্য Navigator.push() ব্যবহার করা হয়। এটি একটি নতুন স্ক্রিন বা Route স্ট্যাকের উপরে যোগ করে।

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

• এখানে, SecondPage হলো নতুন স্ক্রিন যা নেভিগেট করা হবে। MaterialPageRoute ব্যবহার করে আমরা নতুন Route তৈরি করেছি।

২. স্ক্রিন থেকে ফিরে আসা (পপ):

Navigator.pop() ব্যবহার করে বর্তমান স্ক্রিন থেকে আগের স্ক্রিনে ফিরে যাওয়া যায়।

Navigator.pop(context);

• এটি বর্তমান স্ক্রিনকে Navigator স্ট্যাক থেকে সরিয়ে আগের স্ক্রিনে ফিরে যাবে।

Routes কনফিগার করা (Named Routes):

Flutter এ আপনি Routes কনফিগার করতে পারেন MaterialApp এর routes প্রপার্টি ব্যবহার করে। এটি স্ক্রিনের মধ্যে নেভিগেশন সহজ করে এবং অ্যাপ্লিকেশনের কোড পরিষ্কার রাখে।

Named Routes কনফিগার করার উদাহরণ:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home Page'),
        ),
      ),
    );
  }
}

উপরে দেয়া কোডের ব্যাখ্যা:

• initialRoute: এটি অ্যাপের প্রথম স্ক্রিন হিসেবে ব্যবহৃত হয়, অর্থাৎ অ্যাপটি চালু হওয়ার পর যে স্ক্রিনটি প্রথম প্রদর্শিত হবে।
• routes: একটি ম্যাপ যেখানে Route এর নাম এবং তাদের সাথে সংশ্লিষ্ট Widget বা স্ক্রিন ডিক্লেয়ার করা হয়েছে।
• Navigator.pushNamed(context, '/second'): এই কমান্ডের মাধ্যমে আমরা /second রুটে নেভিগেট করেছি।
• Navigator.pop(context): এই কমান্ডের মাধ্যমে আমরা বর্তমান স্ক্রিন থেকে আগের স্ক্রিনে ফিরে গিয়েছি।

Arguments সহ নেভিগেশন (Data Passing):

Flutter এ স্ক্রিনের মধ্যে ডেটা পাঠাতে Navigator.push বা Navigator.pushNamed এর মাধ্যমে arguments পাঠানো যায়।

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: 'Hello from Home Page'),
  ),
);

SecondPage এ ডেটা গ্রহণ:

class SecondPage extends StatelessWidget {
  final String data;

  SecondPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

Passing Data with Named Routes:

Flutter এ Navigator.pushNamed এর মাধ্যমে arguments পাঠানোর জন্য arguments প্রপার্টি ব্যবহার করা যায়।

Navigator.pushNamed(
  context,
  '/second',
  arguments: 'Hello from Home Page',
);

SecondPage এ ডেটা গ্রহণ:

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String data = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

Named Routes এবং Dynamic Routes ব্যবহারের সুবিধা:

• Readable এবং Maintainable কোড: Named Routes এবং Dynamic Routes ব্যবহার করে অ্যাপের কোড সহজে বুঝতে এবং পরিচালনা করা যায়।
• Reusability: একটি Route একাধিক জায়গায় ব্যবহার করা যায়, ফলে কোড পুনঃব্যবহার করা সহজ হয়।
• Data Passing: Named Routes এর মাধ্যমে ডাইনামিক ডেটা পাঠানো সহজ হয়।

Route এবং Navigation ব্যবহারের সংক্ষিপ্ত বিবরণ:

Navigation এবং Routes ব্যবহারের সুবিধা:

• বহু-পৃষ্ঠার অ্যাপ তৈরি: একটি অ্যাপ্লিকেশনে একাধিক স্ক্রিন বা পৃষ্ঠার মধ্যে সহজেই নেভিগেট করা যায়।
• ডেটা আদানপ্রদান: স্ক্রিনের মধ্যে ডেটা আদানপ্রদান করা যায়, যা ডাইনামিক কন্টেন্ট প্রদর্শনের জন্য প্রয়োজনীয়।
• UI স্ট্যাক ম্যানেজমেন্ট: Navigator এর মাধ্যমে স্ক্রিন স্ট্যাক ম্যানেজ করে, যা একটি সুন্দর এবং ব্যবহারকারী-বান্ধব নেভিগেশন অভিজ্ঞতা প্রদান করে।

Flutter এ Navigation এবং Routes ব্যবহার করে আপনি সহজেই একটি পূর্ণাঙ্গ মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করতে পারবেন, যা ডেটা আদানপ্রদান ও বিভিন্ন স্ক্রিনের মধ্যে নেভিগেশনের সুবিধা দেয়।

Flutter অ্যাপে Multiple Screens এবং Navigation ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং ব্যবহারবান্ধব করা যায়। Navigation ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনটিতে বিভিন্ন স্ক্রিন বা পেজের মধ্যে যাতায়াত করতে পারবেন। Flutter-এ Navigator এবং রুট ব্যবহারের মাধ্যমে Navigation পরিচালনা করা হয়। এখানে Flutter-এ Multiple Screens এবং Navigation কিভাবে করা যায় তার বিস্তারিত আলোচনা করা হলো:

১. Multiple Screens তৈরি করা

Flutter-এ প্রতিটি স্ক্রিন একটি আলাদা উইজেট হিসেবে তৈরি করা হয়। সাধারণত আমরা StatelessWidget বা StatefulWidget ব্যবহার করে স্ক্রিন তৈরি করি। নিচে দুটি স্ক্রিন উদাহরণ হিসেবে তৈরি করা হয়েছে:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to Home Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

২. কোডের ব্যাখ্যা

1. HomeScreen এবং SecondScreen: এখানে দুটি আলাদা স্ক্রিন তৈরি করা হয়েছে। HomeScreen থেকে SecondScreen-এ যেতে একটি বাটন আছে এবং SecondScreen থেকে HomeScreen-এ ফিরে যাওয়ার জন্য একটি বাটন আছে।
2. MaterialApp:
   • initialRoute: অ্যাপ্লিকেশন চালু হলে প্রথমে কোন স্ক্রিন দেখানো হবে তা নির্ধারণ করে।
   • routes: অ্যাপ্লিকেশনের বিভিন্ন স্ক্রিন বা পেজের রুট নির্ধারণ করে। / দ্বারা HomeScreen এবং /second দ্বারা SecondScreen এর রুট নির্ধারণ করা হয়েছে।
3. Navigator:
   • pushNamed: এই মেথডটি ব্যবহার করে আমরা নতুন স্ক্রিনে যেতে পারি। এখানে /second রুটের মাধ্যমে SecondScreen-এ যাওয়া হয়েছে।
   • pop: এই মেথডটি ব্যবহার করে আমরা আগের স্ক্রিনে ফিরে আসতে পারি।

৩. Direct Routes এবং Named Routes

Flutter-এ দুটি ধরনের রুট সিস্টেম রয়েছে:

• Direct Route: সরাসরি উইজেট পাস করে নেভিগেশন করা হয়।
• Named Route: স্ক্রিনের জন্য একটি নাম নির্ধারণ করে পরে সেই নাম ব্যবহার করে নেভিগেশন করা হয়।

Direct Route উদাহরণ

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

• MaterialPageRoute: এটি একটি Route ক্লাস, যা স্ক্রিনের জন্য একটি নতুন রুট তৈরি করে। builder প্যারামিটারে আমরা যেতে চাওয়া স্ক্রিনের উইজেট পাস করি।

Named Route উদাহরণ

Navigator.pushNamed(context, '/second');

• Named Route ব্যবহারের সুবিধা হলো, এটি কোডে পরিবর্তন করা সহজ এবং সরাসরি উইজেটের নাম উল্লেখ না করেও রুট পরিচালনা করা যায়।

৪. ডেটা পাস করা স্ক্রিনের মধ্যে

Flutter-এ এক স্ক্রিন থেকে অন্য স্ক্রিনে ডেটা পাস করা যায়। Navigator.push() বা Navigator.pushNamed() মেথড ব্যবহার করে আমরা ডেটা পাস করতে পারি।

উদাহরণ: ডেটা পাস করা

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(data: 'Hello from Home Screen'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

• এখানে HomeScreen থেকে data পাস করা হয়েছে SecondScreen-এ। SecondScreen-এ ডেটা রিসিভ করে প্রদর্শন করা হয়েছে।

৫. স্ক্রিনে নেভিগেশন এবং রিটার্ন ভ্যালু পাস করা

Flutter-এ আপনি স্ক্রিনে নেভিগেশন করার সময় রিটার্ন ভ্যালু পেতে পারেন। এটি সাধারণত ফর্ম সাবমিশন বা ইউজার ইন্টারঅ্যাকশন থেকে রেজাল্ট সংগ্রহ করতে ব্যবহৃত হয়।

উদাহরণ: রিটার্ন ভ্যালু পাস করা

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () async {
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
            print('Returned value: $result');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Return to Home Screen'),
          onPressed: () {
            Navigator.pop(context, 'Hello from Second Screen');
          },
        ),
      ),
    );
  }
}

• Navigator.pop(context, 'value'): যখন স্ক্রিন থেকে ফিরে আসা হয়, তখন একটি ভ্যালু পাস করা হয়।
• await Navigator.push(): এই মেথডটি ব্যবহার করে আমরা স্ক্রিনে গিয়ে ভ্যালু ফেরত আনার জন্য অপেক্ষা করি।

৬. Bottom Navigation Bar ব্যবহার করা

Flutter-এ BottomNavigationBar ব্যবহার করে আপনি নিচে একটি নেভিগেশন বার তৈরি করতে পারেন, যা দিয়ে একাধিক স্ক্রিনে নেভিগেট করা যায়।

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

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

  final List<Widget> _screens = [
    HomeScreen(),
    SecondScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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'),
        ],
      ),
    );
  }
}

৭. Drawer ব্যবহার করা

Flutter-এ Drawer উইজেট ব্যবহার করে সাইড নেভিগেশন মেনু তৈরি করা যায়, যা বিভিন্ন স্ক্রিনের জন্য লিংক প্রদান করে।

Scaffold(
  appBar: AppBar(
    title: Text('Drawer Example'),
  ),
  drawer: Drawer(
    child: ListView(
      children: <Widget>[
        ListTile(
          title: Text('Home'),
          onTap: () {
            Navigator.pushNamed(context, '/');
          },
        ),
        ListTile(
          title: Text('Second Screen'),
          onTap: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ],
    ),
  ),
  body: Center(child: Text('Drawer Navigation')),
)

এইভাবে, Flutter-এ Multiple Screens এবং Navigation ব্যবহার করে আপনি একটি পূর্ণাঙ্গ অ্যাপ্লিকেশন তৈরি করতে পারেন, যা ব্যবহারকারীদের বিভিন্ন স্ক্রিনের মধ্যে সহজে নেভিগেট করতে সহায়তা করবে।

Flutter এ Named Routes ব্যবহার করে Navigation করা একটি সাধারণ এবং কার্যকর পদ্ধতি। এটি অ্যাপের স্ক্রিনগুলোর মধ্যে নেভিগেশন (যাতায়াত) সহজ এবং সংগঠিত করে। Named Routes ব্যবহার করে, আপনি সরাসরি একটি নামের মাধ্যমে স্ক্রিনে নেভিগেট করতে পারেন, যা কোডকে পরিষ্কার এবং পড়তে সহজ করে তোলে। নিচে Named Routes ব্যবহার করে Navigation করার ধাপগুলো এবং উদাহরণ আলোচনা করা হলো।

Named Routes কি?

• Named Routes হলো স্ক্রিনের জন্য নির্দিষ্ট নামকরণকৃত পাথ যা অ্যাপের বিভিন্ন অংশে নেভিগেশনের জন্য ব্যবহৃত হয়। প্রতিটি স্ক্রিনের জন্য একটি নির্দিষ্ট নাম সেট করা হয়, এবং যখন সেই স্ক্রিনে যেতে হয়, তখন সেই নাম ব্যবহার করা হয়।
• উদাহরণস্বরূপ, যদি আপনার একটি হোম স্ক্রিন এবং একটি প্রোফাইল স্ক্রিন থাকে, তাহলে তাদের জন্য Named Routes হতে পারে / (হোম স্ক্রিন) এবং /profile (প্রোফাইল স্ক্রিন)।

Named Routes সেটআপ করার ধাপ:

ধাপ ১: MaterialApp এর মধ্যে Routes ডিফাইন করা:

• আপনার অ্যাপের এন্ট্রি পয়েন্টে (যেমন main.dart ফাইল) MaterialApp Widget এ routes প্রপার্টি সেট করুন।
• routes একটি ম্যাপ (Map) যেখানে প্রতিটি Route এর নাম এবং স্ক্রিন Widget এর ম্যাপিং থাকে।

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Routes',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/profile': (context) => ProfileScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}

• initialRoute: এটি অ্যাপটি প্রথম চালানোর সময় কোন Route বা স্ক্রিন দেখানো হবে তা নির্ধারণ করে। এখানে / হলো হোম স্ক্রিন।
• routes: এটি একটি Map, যেখানে প্রতিটি key হলো Route এর নাম (string), এবং value হলো একটি ফাংশন যা একটি Widget রিটার্ন করে।

ধাপ ২: স্ক্রিন তৈরি করা:

• প্রতিটি Route এর জন্য একটি আলাদা স্ক্রিন (Widget) তৈরি করুন।

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to Home Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
              child: Text('Go to Profile'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
              child: Text('Go to Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Screen'),
      ),
      body: Center(
        child: Text('This is the Profile Screen'),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: Text('This is the Settings Screen'),
      ),
    );
  }
}

• এখানে HomeScreen, ProfileScreen, এবং SettingsScreen নামে তিনটি স্ক্রিন তৈরি করা হয়েছে। প্রতিটি স্ক্রিন Scaffold দিয়ে তৈরি এবং বিভিন্ন UI উপাদান ধারণ করে।

ধাপ ৩: Navigator ব্যবহার করে Named Route এ নেভিগেট করা:

• Navigator.pushNamed(context, '/routeName') ফাংশন ব্যবহার করে আপনি Named Route এ নেভিগেট করতে পারেন।

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/profile');
  },
  child: Text('Go to Profile'),
)

• এই উদাহরণে, একটি বাটনে ক্লিক করলে ProfileScreen এ নেভিগেট করা হবে কারণ /profile Route কল করা হয়েছে।

Named Routes ব্যবহার করে একটি সম্পূর্ণ উদাহরণ:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Routes Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/profile': (context) => ProfileScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to Home Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
              child: Text('Go to Profile'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
              child: Text('Go to Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

• এখানে HomeScreen থেকে ProfileScreen এবং SettingsScreen এ নেভিগেট করা হয়েছে।
• প্রতিটি স্ক্রিনে Navigator.pop(context) ব্যবহার করে আগের স্ক্রিনে ফিরে যাওয়া যায়।

Named Routes এর সুবিধা:

• কোড পরিষ্কার এবং সংক্ষিপ্ত রাখা যায়, কারণ Route এর নাম ব্যবহার করে স্ক্রিনে নেভিগেট করা হয়।
• বড় অ্যাপ্লিকেশনগুলোতে Route গুলো সংগঠিত করা সহজ।
• Route গুলোর নাম পরিবর্তন করলে অ্যাপের অন্যান্য জায়গায় কোড পরিবর্তনের প্রয়োজন হয় না (কেবল Route ম্যাপে পরিবর্তন করতে হয়)।

সংক্ষেপে, Named Routes ব্যবহারের মাধ্যমে Flutter অ্যাপে সহজে স্ক্রিন নেভিগেশন করা যায়, যা কোডকে ম্যানেজেবল এবং রিডেবল করে তোলে।

Flutter এ Navigator.push এবং Navigator.pop হলো স্ক্রিন বা পৃষ্ঠার মধ্যে নেভিগেট করার দুটি প্রধান পদ্ধতি। এগুলো Navigator ক্লাসের অংশ, যা Flutter অ্যাপ্লিকেশনের বিভিন্ন স্ক্রিনের মধ্যে নেভিগেশনের জন্য ব্যবহৃত হয়। নিচে Navigator.push এবং Navigator.pop এর বিস্তারিত ব্যাখ্যা এবং উদাহরণ দেয়া হলো।

Navigator.push:

Navigator.push একটি নতুন স্ক্রিন বা Route কে বর্তমান স্ট্যাকের উপরে যোগ করে এবং ব্যবহারকারীকে নতুন স্ক্রিনে নিয়ে যায়। এটি একটি asynchronous পদ্ধতি, যা Future রিটার্ন করে। সাধারণত এটি যখন ব্যবহার করা হয়, তখন ব্যবহারকারী নতুন স্ক্রিনে যেতে পারেন এবং আগের স্ক্রিন ব্যাক বাটন বা অন্য কোনো উপায়ে ফিরতে পারেন।

ব্যবহারের ধরন:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

• context: বর্তমান Widget এর কন্টেক্সট।
• MaterialPageRoute: এটি একটি Route তৈরি করে যা একটি নতুন স্ক্রিন (Widget) প্রদর্শন করে। builder এর মাধ্যমে নতুন Widget (স্ক্রিন) নির্দিষ্ট করা হয়।

উদাহরণ:

import 'package:flutter/material.dart';

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

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}

• HomeScreen এ একটি বাটন রয়েছে যা চাপলে SecondScreen এ নেভিগেট করে।
• Navigator.push ব্যবহার করে SecondScreen কে বর্তমান Route স্ট্যাকের উপরে যোগ করা হয়েছে।

Navigator.pop:

Navigator.pop ব্যবহার করে বর্তমান স্ক্রিন থেকে আগের স্ক্রিনে ফিরে যাওয়া যায়। এটি Route স্ট্যাক থেকে বর্তমান স্ক্রিন সরিয়ে আগের স্ক্রিন প্রদর্শন করে। এটি সাধারণত ব্যাক বাটন ক্লিক করলে বা অন্য কোনো UI ইন্টারঅ্যাকশনের মাধ্যমে ব্যবহৃত হয়।

ব্যবহারের ধরন:

Navigator.pop(context);

• context: বর্তমান Widget এর কন্টেক্সট।

উদাহরণ:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back to Home Screen'),
        ),
      ),
    );
  }
}

• SecondScreen এ একটি বাটন রয়েছে, যা চাপলে Navigator.pop ব্যবহার করে আগের স্ক্রিনে (HomeScreen) ফিরে যায়।

Navigator.push এবং Navigator.pop এর ব্যবহারিক ক্ষেত্রে:

ডেটা পাস করা (Navigator.push এবং Navigator.pop):

Flutter এ Navigator.push এবং Navigator.pop এর মাধ্যমে স্ক্রিনের মধ্যে ডেটা পাস করা যায়। উদাহরণস্বরূপ:

ডেটা পাঠানো (Navigator.push):

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(data: 'Hello from Home Screen'),
  ),
);

ডেটা গ্রহণ করা (SecondScreen):

class SecondScreen extends StatelessWidget {
  final String data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

ডেটা ফেরত পাঠানো (Navigator.pop):

Navigator.pop(context, 'Data from Second Screen');

ডেটা রিসিভ করা (HomeScreen):

onPressed: () async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );

  print(result); // Output: Data from Second Screen
},

Navigator.push এবং Navigator.pop এর সুবিধা:

• স্ক্রিন পরিবর্তন: মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে, যেখানে ব্যবহারকারী এক স্ক্রিন থেকে অন্য স্ক্রিনে নেভিগেট করতে পারেন।
• স্ট্যাক ম্যানেজমেন্ট: Navigator স্ট্যাকের মতো কাজ করে, যা UI ট্রানজিশন এবং ব্যাক নেভিগেশনে সহায়তা করে।
• ডেটা পাসিং: স্ক্রিনের মধ্যে ডেটা আদানপ্রদান করা যায়, যা ডাইনামিক কন্টেন্ট প্রদর্শনের জন্য প্রয়োজনীয়।

Navigator.push এবং Navigator.pop ব্যবহার করে আপনি Flutter এ সহজেই একটি মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করতে পারবেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী ডাইনামিক এবং ফ্লেক্সিবল UI প্রদান করে।

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-এ একটি পূর্ণাঙ্গ এবং ব্যবহারবান্ধব নেভিগেশন সিস্টেম তৈরি করতে পারবেন।