Navigator: এটি কী, Flutter-এ স্ক্রিন ব্যবস্থাপনা

Flutter-এ Navigator কী

Navigator হল একটি উইজেট যা Route অবজেক্টের স্ট্যাক পরিচালনা করে, Flutter অ্যাপ্লিকেশনে স্ক্রিন নেভিগেশন বাস্তবায়ন করে। push-এর প্রতিটি কল স্ট্যাকের শীর্ষে একটি নতুন Route রাখে, pop শীর্ষ Route সরিয়ে দেয় এবং পূর্ববর্তী স্ক্রিনে ফিরে আসে। MaterialApp পুরো অ্যাপ্লিকেশনের জন্য স্বয়ংক্রিয়ভাবে একটি Navigator তৈরি করে, যা Navigator.of(context)-এর মাধ্যমে অ্যাক্সেসযোগ্য করে তোলে।

StatefulWidget-এর বিপরীতে, যেখানে একটি একক উইজেটের ভিতরে setState-এর মাধ্যমে বিষয়বস্তু প্রতিস্থাপন ঘটে, Navigator সম্পূর্ণ স্ক্রিন নিয়ে কাজ করে যাদের নিজস্ব জীবনচক্র রয়েছে। স্ট্যাকের প্রতিটি Route নিজস্ব BuildContext সহ একটি বিচ্ছিন্ন অবস্থা, যা মেমরি লিক প্রতিরোধ করে এবং নির্ভরতা ব্যবস্থাপনা সহজ করে। pop কল করলে, অব্যবহৃত Route ধ্বংস হয়ে যায়, সম্পদ মুক্ত করে।

Flutter Navigation Guide (2026) অনুসারে, Navigator ইম্পেরেটিভ API (Navigator 1.0) থেকে ডিক্লারেটিভ (Navigator 2.0)-এ বিবর্তিত হয়েছে। Navigator 1.0 সরাসরি push/pop পদ্ধতি ব্যবহার করে, যা সাধারণ পরিস্থিতির জন্য সুবিধাজনক। Navigator 2.0 (Router) গভীর লিংক, অভিযোজিত নেভিগেশন এবং ওয়েব রাউটিং সহ অ্যাপ্লিকেশনের জন্য উপযুক্ত।

Navigator ভিতরে কীভাবে কাজ করে

অভ্যন্তরীণভাবে, Navigator Overlay ব্যবহার করে — একটি বিশেষ উইজেট যা Routes একটির উপরে একটি প্রদর্শন করে। প্রতিটি Route স্ট্যাকে তার গভীরতার সাথে সম্পর্কিত z-ইন্ডেক্স সহ Overlay-এ নিজস্ব অবস্থান তৈরি করে। এটি ব্যাখ্যা করে কেন push কল করলে নতুন স্ক্রিন পূর্ববর্তী স্ক্রিনের উপরে অ্যানিমেট হয়, এবং pop কল করলে পূর্ববর্তী স্ক্রিন প্রদর্শনের জন্য প্রস্তুত থাকে: এটি ধ্বংস হয়নি বরং নতুন স্ক্রিনের নীচে Overlay-এ থেকে গিয়েছিল।

ট্রানজিশন অ্যানিমেশনের জন্য, Navigator PageTransitionsTheme ব্যবহার করে, যা ThemeData-তে ওভাররাইড করা যেতে পারে। প্ল্যাটফর্ম-নির্দিষ্ট অ্যানিমেশন iOS-এর জন্য CupertinoPageRoute (ডান দিক থেকে স্লাইড) এবং Android-এর জন্য MaterialPageRoute (নীচ থেকে স্লাইড) এর মাধ্যমে সেট করা হয়। PlatformRoute ব্যবহার করার সময় Navigator স্বয়ংক্রিয়ভাবে সঠিক অ্যানিমেশন নির্বাচন করে।

Navigator পদ্ধতি: push, pop এবং pushReplacement

Navigator Route স্ট্যাক পরিচালনার জন্য পদ্ধতির একটি সেট প্রদান করে। প্রতিটি পদ্ধতি একটি নির্দিষ্ট নেভিগেশন কাজ সমাধান করে — একটি সাধারণ ট্রানজিশন থেকে স্ক্রিন ইতিহাসের সম্পূর্ণ প্রতিস্থাপন পর্যন্ত। আসুন ব্যবহার উদাহরণ সহ প্রধান পদ্ধতিগুলি পর্যালোচনা করি।

Push এবং Pop: মৌলিক ক্রিয়াকলাপ

push পদ্ধতি একটি Route নেয় এবং pop-এর সময় পাস করা ফলাফল সহ একটি Future ফেরত দেয়। এটি যে স্ক্রিনে নেভিগেট করা হয়েছিল সেখান থেকে ডেটা গ্রহণের অনুমতি দেয়। উদাহরণস্বরূপ, একটি তারিখ নির্বাচক স্ক্রিন Navigator.pop(context, selectedDate)-এর মাধ্যমে DateTime ফেরত দিতে পারে। pop পদ্ধতি আর্গুমেন্ট ছাড়া null ফেরত দেয়, আর্গুমেন্ট সহ — কলকারী স্ক্রিনে মান পাঠায়।

PushReplacement: স্ক্রিন প্রতিস্থাপন

pushReplacement বর্তমান Route কে একটি নতুন দিয়ে প্রতিস্থাপন করে, বর্তমান রুটকে স্ট্যাক থেকে সরিয়ে দেয়। এটি সেই পরিস্থিতির জন্য গুরুত্বপূর্ণ যেখানে ব্যবহারকারীর পূর্ববর্তী স্ক্রিনে ফিরে যাওয়া উচিত নয়। একটি সাধারণ উদাহরণ — লগইন স্ক্রিন: সফল লগইনের পরে, বর্তমান স্ক্রিনটি প্রধান স্ক্রিন দ্বারা প্রতিস্থাপিত হয়, এবং ব্যাক বাটন লগইন ফর্মে ফিরে আসে না।

নামকৃত রুট এবং onGenerateRoute

Navigator pushNamed পদ্ধতির মাধ্যমে নামকৃত রুট দ্বারা নেভিগেশন সমর্থন করে। সরাসরি Route তৈরি করার পরিবর্তে, ডেভেলপার একটি স্ট্রিং শনাক্তকারী নির্দিষ্ট করে, এবং Navigator MaterialApp-এর কনফিগারেশনের ভিত্তিতে স্বয়ংক্রিয়ভাবে Route তৈরি করে। এটি কোড সহজ করে এবং এক জায়গায় রুট সংজ্ঞা কেন্দ্রীভূত করে।

নামকৃত রুটগুলি MaterialApp-এ routes বৈশিষ্ট্যের মাধ্যমে সংজ্ঞায়িত করা হয়, যেখানে প্রতিটি কী একটি পাথ স্ট্রিং এবং মান একটি ফাংশন যা Widget ফেরত দেয়। গতিশীল রুটের (প্যারামিটার সহ) জন্য, onGenerateRoute ব্যবহার করা হয় — একটি কলব্যাক যা RouteSettings গ্রহণ করে এবং Route ফেরত দেয়। এটি arguments প্যারামিটারের মাধ্যমে আর্গুমেন্ট পাস করার এবং গভীর নেভিগেশন বাস্তবায়নের অনুমতি দেয়।

Flutter Cookbook (2026) অনুসারে, pushNamed-এর মাধ্যমে আর্গুমেন্ট পাস করা arguments: Object? প্যারামিটারের মাধ্যমে করা হয়। গ্রহীতা স্ক্রিন ModalRoute.of(context)!.settings.arguments-এর মাধ্যমে আর্গুমেন্ট বের করে, যা গ্লোবাল ভেরিয়েবল বা InheritedWidget ছাড়া টাইপ-নিরাপদ ডেটা স্থানান্তর প্রদান করে।

অজানা রুট হ্যান্ডলিং

MaterialApp-এ onUnknownRoute বৈশিষ্ট্য সেই ক্ষেত্রগুলি হ্যান্ডল করে যেখানে pushNamed একটি অস্তিত্বহীন রুট দিয়ে কল করা হয়। এটি 404 স্ক্রিন দেখানো বা হোম পেজে রিডাইরেক্ট করার জন্য দরকারী। onGenerateRoute-এর সাথে সংমিশ্রণে, এটি সমস্ত সম্ভাব্য নেভিগেশন পরিস্থিতির সম্পূর্ণ কভারেজ নিশ্চিত করে।

Navigator 2.0 এবং ডিক্লারেটিভ Router নেভিগেশন

Navigator 2.0 (Router API নামেও পরিচিত) Flutter 2.0-তে প্রবর্তিত নেভিগেশনের একটি ডিক্লারেটিভ পদ্ধতি। ইম্পেরেটিভ Navigator 1.0-এর বিপরীতে, যেখানে ডেভেলপার push/pop কল করে, Router অবস্থার মাধ্যমে নেভিগেশন পরিচালনা করে, স্বয়ংক্রিয়ভাবে ব্রাউজার URL বর্তমান স্ক্রিনের সাথে সিঙ্ক্রোনাইজ করে। এটি বিশেষত ওয়েব অ্যাপ্লিকেশন এবং ডেস্কটপ সংস্করণের জন্য গুরুত্বপূর্ণ।

Navigator 2.0 আর্কিটেকচারে তিনটি মূল উপাদান রয়েছে: RouteInformationParser URL-কে রুট কনফিগারেশনে পার্স করে, RouterDelegate কনফিগারেশনকে Routes-এর তালিকায় রূপান্তর করে, এবং BackButtonDispatcher সিস্টেম ব্যাক বাটন হ্যান্ডল করে। এই আর্কিটেকচার নেভিগেশনকে সম্পূর্ণ পূর্বানুমানযোগ্য এবং পরীক্ষাযোগ্য করে তোলে।

Navigator 2.0-এর সাথে কাজ সহজ করার জন্য, র্যাপার প্যাকেজ রয়েছে: go_router (Google দ্বারা সুপারিশকৃত), auto_route এবং beamer। go_router ম্যানুয়ালি RouterDelegate বাস্তবায়ন না করেই নেস্টেড নেভিগেশন, রিডাইরেক্ট এবং গভীর লিংকের সমর্থন সহ রুট সংজ্ঞায়িত করার জন্য একটি ডিক্লারেটিভ DSL প্রদান করে। pub.dev (2026) অনুসারে, go_router 35% নতুন Flutter প্রকল্পে ব্যবহৃত হয় যা ডিক্লারেটিভ পদ্ধতি পছন্দ করে।

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

আসুন নামকৃত রুট এবং স্ক্রিনের মধ্যে ডেটা পাস করার সাথে Navigator-এর একটি উদাহরণ দেখি। কোডটি একটি পণ্য তালিকা স্ক্রিন, একটি বিস্তারিত স্ক্রিনে ট্রানজিশন এবং ফলাফল সহ ফিরে আসা প্রদর্শন করে।

// Route configuration in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

উদাহরণে, Navigator.pushNamed পণ্য আইডি বিস্তারিত স্ক্রিনে পাঠায়। Navigator.pop(context, updatedProduct)-এর মাধ্যমে ফিরে আসার পর, কলকারী স্ক্রিন result ভেরিয়েবলে আপডেট করা ডেটা গ্রহণ করে। pushReplacementNamed প্রমাণীকরণের পরে বর্তমান স্ক্রিন প্রতিস্থাপন করে, এবং শর্ত (route) => false সহ pushNamedAndRemoveUntil সম্পূর্ণরূপে স্ট্যাক পরিষ্কার করে, পূর্ববর্তী স্ক্রিনে ফিরে নেভিগেশন প্রতিরোধ করে।