Route — এটি কী, ফ্লাটারে রুটের প্রকার ও তৈরি

ফ্লাটারে Route কী

Route হল ফ্লাটার নেভিগেশন সিস্টেমের ভিত্তি। একটি অ্যাপ্লিকেশনে ব্যবহারকারীর দেখা প্রতিটি স্ক্রিন নেভিগেটর স্ট্যাকের মধ্যে অবস্থিত একটি Route অবজেক্ট দ্বারা উপস্থাপিত হয়। Route নিয়ন্ত্রণ কোড থেকে স্ক্রিনকে বিমূর্ত করে: নেভিগেটর Route যোগ করে এবং সরিয়ে দেয়, যখন Route-এর ভিতরে ব্যবহারকারীর দেখা ইন্টারফেস থাকে। এই আর্কিটেকচার নেভিগেশন এবং প্রদর্শনের মধ্যে দায়িত্ব পৃথক করে।

সাধারণ উইজেট প্রতিস্থাপনের বিপরীতে, Route সাধারণ উইজেটের জন্য অনুপলব্ধ পরিষেবা সরবরাহ করে: ModalBarrier (ডায়ালগ খোলা থাকলে পটভূমি ম্লান করা), প্রবেশ এবং প্রস্থান অ্যানিমেশন নিয়ন্ত্রণ, Android-এ হার্ডওয়্যার ব্যাক বাটন পরিচালনা এবং স্ক্রিনের মধ্যে মসৃণ ট্রানজিশনের জন্য হিরো অ্যানিমেশনের সাথে একীকরণ।

Flutter Cookbook (2026) অনুসারে, Route হিরো অ্যানিমেশনের জন্য একটি মূল উপাদান: একটি Route-এ হিরো উইজেট স্বয়ংক্রিয়ভাবে পরবর্তী Route-এ হিরো উইজেটে ট্রানজিশন অ্যানিমেট করে, একটি “উড়ন্ত” উপাদানের প্রভাব তৈরি করে। এটি সম্ভব কারণ Route অ্যানিমেশনের সময় ওভারলেতে উভয় স্ক্রিন রাখে।

নেভিগেশনের বিল্ডিং ব্লক হিসাবে Route

Route সরল মোবাইল অ্যাপ্লিকেশন (নেভিগেটর 1.0-এর মাধ্যমে) এবং গভীর লিঙ্ক সহ জটিল পরিস্থিতি (নেভিগেটর 2.0) উভয়ের জন্যই ভিত্তি। নেভিগেটর 2.0-এ, Route একটি পৃষ্ঠাকে উপস্থাপন করে যা RouterDelegate রুট কনফিগারেশন থেকে রূপান্তর করে। সুতরাং, যেকোনো ফ্লাটার নেভিগেশন সিস্টেমের সাথে কাজ করার জন্য Route বোঝা অপরিহার্য — নির্বাচিত পদ্ধতি বা প্যাকেজ নির্বিশেষে।

Route-এর প্রকার: MaterialPageRoute এবং CupertinoPageRoute

Flutter Route-এর বেশ কয়েকটি অন্তর্নির্মিত বাস্তবায়ন সরবরাহ করে, প্রতিটি একটি নির্দিষ্ট প্ল্যাটফর্মের সাথে আচরণ খাপ খাইয়ে নেয়। সঠিক Route প্রকার নির্বাচন ব্যবহারকারীর অভিজ্ঞতাকে প্রভাবিত করে: Android-এ ম্যাটেরিয়াল অ্যানিমেশন এবং iOS-এ Cupertino অ্যানিমেশন একটি “নেটিভ” অ্যাপ্লিকেশনের অনুভূতি তৈরি করে।

MaterialPageRoute: Android-এর মান

MaterialPageRoute সবচেয়ে বেশি ব্যবহৃত Route বাস্তবায়ন। এটি ধীরে ধীরে আবির্ভাব সহ নিচ থেকে উপরে নতুন স্ক্রিন অ্যানিমেট করে। প্রস্থান করার সময়, স্ক্রিন উপরে থেকে নিচে অ্যানিমেট হয়, তার মূল অবস্থানে ফিরে আসে। টুলবার (AppBar) এবং স্ক্রিন বডি আলাদাভাবে অ্যানিমেট হয়, একটি শ্রেণিবিন্যাস প্রভাব তৈরি করে।

CupertinoPageRoute: iOS নেভিগেশন শৈলী

CupertinoPageRoute iOS-এর UINavigationController-এর অনুকরণ করে। নতুন স্ক্রিন ডান দিক থেকে প্রবেশ করে, আগের স্ক্রিনকে ঢেকে ফেলে। মূল বৈশিষ্ট্য হল CupertinoBackGestureDetector-এর মাধ্যমে বাস্তবায়িত ইন্টারঅ্যাকটিভ সোয়াইপ-ব্যাক অঙ্গভঙ্গির জন্য সমর্থন। এই অঙ্গভঙ্গি অ্যানিমেশনের মাঝখানেও পরিচালিত হয়, যা iPhone ব্যবহারকারীদের কাছে পরিচিত প্রাকৃতিক আচরণ প্রদান করে।

Route-এর জীবনচক্র: সৃষ্টি থেকে নিষ্পত্তি

Route-এর নিজস্ব জীবনচক্র রয়েছে, যা সাধারণ StatefulWidget-এর জীবনচক্র থেকে পৃথক। এই চক্র বোঝা সঠিক ডেটা আরম্ভীকরণ, স্ট্রিম সাবস্ক্রিপশন এবং স্ক্রিন বন্ধ করার সময় সংস্থান মুক্তির জন্য প্রয়োজনীয়।

Route জীবনচক্রের ধাপ

Route জীবনচক্র চারটি প্রধান ধাপ নিয়ে গঠিত। ট্রানজিশন — Route তৈরি হয় এবং প্রবেশের সময় অ্যানিমেট হয় (didPush কল করা হয়)। সক্রিয় — Route সম্পূর্ণরূপে প্রদর্শিত হয় এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে। নিষ্ক্রিয় — অন্য Route বর্তমানটিকে ঢেকে দেয় (ডায়ালগ, বটম শীট), কিন্তু Route স্ট্যাকে থাকে। নিষ্পত্তি — Route স্ট্যাক থেকে সরিয়ে দেওয়া হয় এবং ধ্বংস করা হয়, didPop এবং dispose কল করা হয়।

Route জীবনচক্র পদ্ধতিগুলি কাস্টম বাস্তবায়নে ওভাররাইড করা যেতে পারে। উদাহরণস্বরূপ, didPop কল করা হয় যখন Route স্ট্যাক থেকে সরানো হয় — এখানে আপনি খসড়া ডেটা সংরক্ষণ করতে পারেন। didChangeNext কল করা হয় যখন স্ট্যাকের পরবর্তী Route পরিবর্তিত হয়েছে — নেভিগেশন ইতিহাস পরিবর্তিত হলে UI আপডেট করার জন্য দরকারী।

Flutter API Route.didPop (2026) অনুসারে, Route-এর ভিতরে State-এর জীবনচক্রের সাথে Route-এর জীবনচক্রকে গুলিয়ে না ফেলা গুরুত্বপূর্ণ। Route-এর ভিতরে StatefulWidget-এর নিজস্ব initState এবং dispose রয়েছে, যা যথাক্রমে ট্রানজিশন এবং নিষ্পত্তি ধাপের সময় কল করা হয়। Route তার অভ্যন্তরীণ State-এর চেয়ে বেশি দিন বেঁচে থাকে — Route ওভারলেতে থাকে এমনকি যখন তার উইজেটগুলি অস্থায়ীভাবে অন্য Route দ্বারা লুকানো থাকে।

Route-এর মাধ্যমে স্ক্রিনের মধ্যে ডেটা স্থানান্তর

Route ইনপুট (তৈরির সময়) এবং আউটপুট (শেষ হলে) উভয় ক্ষেত্রেই ডেটা স্থানান্তরের প্রক্রিয়া সরবরাহ করে। Route-এর মাধ্যমে সঠিক ডেটা স্থানান্তর গ্লোবাল ভেরিয়েবল এবং InheritedWidget-এর প্রয়োজনীয়তা দূর করে, নেভিগেশনকে টাইপ-নিরাপদ এবং অনুমানযোগ্য করে তোলে।

নতুন স্ক্রিনে ডেটা স্থানান্তর করতে, গ্রহণকারী উইজেটের কনস্ট্রাক্টর বা Navigator.pushNamed-এ arguments প্যারামিটার ব্যবহার করুন। Route-এর ভিতরে, ডেটা RouteSettings.arguments-এর মাধ্যমে অ্যাক্সেসযোগ্য, যা Route অবজেক্টে সংরক্ষিত থাকে। এই পদ্ধতি সমস্ত Route প্রকারের জন্য কাজ করে — MaterialPageRoute, CupertinoPageRoute এবং কাস্টম বাস্তবায়ন।

ডেটা ফেরত দিতে, Navigator.pop(context, result)-এর দ্বিতীয় আর্গুমেন্ট ব্যবহার করুন। Navigator.push Future ফেরত দেয়, যা pop-এ দেওয়া মান দিয়ে পূর্ণ হয়। যদি pop আর্গুমেন্ট ছাড়া কল করা হয়, Future null দিয়ে পূর্ণ হয়। এই প্রক্রিয়াটি Android-এ startActivityForResult এবং iOS-এ কমপ্লিশন হ্যান্ডলারের অনুরূপ, তবে Dart Future-এর মাধ্যমে বাস্তবায়িত।

Route কনস্ট্রাক্টরের মাধ্যমে ডেটা স্থানান্তর

MaterialPageRoute-এর সাথে সরাসরি Navigator.push কল করার সময়, ডেটা লক্ষ্য স্ক্রিনের কনস্ট্রাক্টরের মাধ্যমে প্রেরণ করা হয়। MethodChannel ব্যবহার করা হয় না — এটি বিশুদ্ধ Dart মিথস্ক্রিয়া। এই পদ্ধতি জটিল অবজেক্টের টাইপ-নিরাপদ স্থানান্তরের জন্য পছন্দনীয়।

কাস্টম Route তৈরির উদাহরণ

আসুন নিজস্ব অ্যানিমেশন এবং ডেটা স্থানান্তর সহ একটি কাস্টম Route তৈরির উদাহরণ দেখি। PageRouteBuilder অ্যানিমেশন বক্ররেখা এবং সময়কালের উপর পূর্ণ নিয়ন্ত্রণ সহ প্রবেশ এবং প্রস্থান অ্যানিমেশন সংজ্ঞায়িত করার অনুমতি দেয়।

// স্লাইড অ্যানিমেশন সহ কাস্টম Route
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// স্ক্রিন থেকে ডেটা ফেরত দিন
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('নির্বাচন করুন'),
);

// কলিং স্ক্রিনে ফলাফল পান
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('নির্বাচিত: ${result['selected']}');
}

উদাহরণে, PageRouteBuilder স্বচ্ছতা সহ নিচ থেকে একটি কাস্টম স্লাইড অ্যানিমেশন সংজ্ঞায়িত করে। transitionDuration অ্যানিমেশনের গতি নির্ধারণ করে। কোড ফলাফল স্থানান্তরও প্রদর্শন করে: বিস্তারিত স্ক্রিন ব্যবহারকারীর নির্বাচনের সাথে একটি Map ফেরত দেয়, এবং কলিং স্ক্রিন push থেকে Future-এর মাধ্যমে এই ডেটা গ্রহণ করে। Route সম্পূর্ণ বিচ্ছিন্নতা নিশ্চিত করে: বিস্তারিত স্ক্রিনের খসড়াগুলি তালিকার অবস্থাকে প্রভাবিত করে না।