ফ্লাটারে এক পেজ থেকে অন্য পেজে নেভিগেশন (Navigator.push/pop): সম্পূর্ণ বাংলা গাইড 🚀

মোবাইল অ্যাপে এক স্ক্রিন থেকে অন্য স্ক্রিনে যাওয়া একটি বেসিক কিন্তু অত্যন্ত গুরুত্বপূর্ণ ফিচার। ফ্লাটারে এই কাজটি করা হয় Navigator ক্লাসের মাধ্যমে। এই ব্লগে আমরা শিখব কিভাবে Navigator.push() এবং Navigator.pop() মেথড ব্যবহার করে পেজ নেভিগেশন ইম্প্লিমেন্ট করতে হয়, সাথে প্র্যাকটিক্যাল কোড উদাহরণ!

নেভিগেশন কি? 🔄

নেভিগেশন মানে হলো অ্যাপের বিভিন্ন স্ক্রিন (পেজ) এর মধ্যে ইউজারকে ঘুরিয়ে নিয়ে যাওয়া। যেমন:

• লগিন স্ক্রিন থেকে হোম স্ক্রিনে যাওয়া।
• প্রোডাক্ট লিস্ট থেকে প্রোডাক্ট ডিটেলস পেজে যাওয়া।

ফ্লাটারে প্রতিটি স্ক্রিন একটি Widget হিসেবে কাজ করে, এবং Navigator এই উইজেটগুলিকে একটি স্ট্যাক (Stack) এ ম্যানেজ করে।

---

নেভিগেটরের বেসিক মেথড 🛠️

১. Navigator.push()

একটি নতুন পেজ স্ট্যাকের উপরে যোগ করে (স্ট্যাকের উপরে পুশ করে)।

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

২. Navigator.pop()

বর্তমান পেজ স্ট্যাক থেকে বের করে আগের পেজে ফেরত যায়।

Navigator.pop(context);  

সিম্পল নেভিগেশন উদাহরণ 🎯

স্টেপ ১: দুটি পেজ তৈরি করুন

প্রথম পেজ (HomePage)

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('হোম পেজ')),
      body: Center(
        child: ElevatedButton(
          child: Text('দ্বিতীয় পেজে যান'),
          onPressed: () {
            // দ্বিতীয় পেজে নেভিগেট
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

দ্বিতীয় পেজ (SecondPage)

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('দ্বিতীয় পেজ')),
      body: Center(
        child: ElevatedButton(
          child: Text('ফিরে যান'),
          onPressed: () {
            // হোম পেজে ফিরে যান
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

স্টেপ ২: main.dart-এ রুট সেট করুন

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(), // প্রথম পেজ হিসেবে HomePage সেট করুন
    );
  }
}

ডাটা পাস করা (প্রথম পেজ থেকে দ্বিতীয় পেজে) 📤

প্রথম পেজে কোড

ElevatedButton(
  onPressed: () {
    String message = "হ্যালো ফ্লাটার!";
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SecondPage(userMessage: message),
      ),
    );
  },
  child: Text('ডাটা সহ পেজে যান'),
),

দ্বিতীয় পেজে কোড

class SecondPage extends StatelessWidget {
  final String userMessage; // ডাটা রিসিভ করার জন্য ভেরিয়েবল

  SecondPage({required this.userMessage}); // কনস্ট্রাক্টর

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('দ্বিতীয় পেজ')),
      body: Center(
        child: Column(
          children: [
            Text(userMessage), // ডাটা শো করুন
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('ফিরে যান'),
            ),
          ],
        ),
      ),
    );
  }
}

নেভিগেশনের কমন ইস্যু ও সমাধান 🛑

১. কনটেক্সট (Context) এর ভুল ব্যবহার

• সমস্যা: Navigator.push() বা pop() এ ভুল কনটেক্সট পাস করলে এরর হয়।
• সমাধান: বাটনের onPressed এর ভিতরে কনটেক্সট ব্যবহার করুন।

২. অতিরিক্ত পেজ পুশ করা

• সমস্যা: বারবার push() করলে স্ট্যাক জ্যাম হয়ে অ্যাপ স্লো হয়।
• সমাধান: popUntil() ব্যবহার করে নির্দিষ্ট পেজে ফিরুন।

Navigator.popUntil(context, (route) => route.isFirst); // প্রথম পেজে ফিরুন

৩. অ্যান্ড্রয়েড ব্যাক বাটন হ্যান্ডেলিং

• সমাধান: WillPopScope উইজেট ব্যবহার করুন।

WillPopScope(
  onWillPop: () async {
    // ব্যাক বাটন প্রেস করলে কি হবে?
    return true; // true = default behavior (pop)
  },
  child: Scaffold(...),
)

টিপস অ্যান্ড ট্রিকস 💡

• Named Routes: জটিল অ্যাপের জন্য Navigator.pushNamed() ব্যবহার করুন (আলাদা ব্লগে আলোচনা করা হবে)।
• অ্যানিমেশন: PageRouteBuilder ব্যবহার করে কাস্টম ট্রানজিশন যুক্ত করুন।
• লগিং: ডিবাগিংয়ের জন্য print() দিয়ে রুটের স্ট্যাক ট্র্যাক করুন।

---

প্র্যাকটিস টাস্ক 📝

১. তিনটি পেজ তৈরি করুন:

• পেজ ১: নাম ইনপুট নিন।
• পেজ ২: নাম শো করুন এবং একটি বাটন রাখুন “পেজ ৩-এ যান”।
• পেজ ৩: “ফিরে যান” বাটনে ক্লিক করলে পেজ ১-এ ফিরে যান।

---

সারাংশ 📘

• Navigator.push() = নতুন পেজ ওপেন।
• Navigator.pop() = কারেন্ট পেজ ক্লোজ করে।
• ডাটা পাস করতে কনস্ট্রাক্টর ব্যবহার করুন।
• কনটেক্সট সর্বদা সঠিকভাবে পাস করুন।

নেভিগেশন মাস্টার করতে প্রতিদিন প্র্যাকটিস করুন! 🔥

---

ব্লগটি শেয়ার করে অন্য ডেভেলপারদের সাহায্য করুন! 🙌