Route — یہ کیا ہے، فلٹر میں روٹ کی اقسام اور تخلیق

فلٹر میں Route کیا ہے

Route فلٹر نیویگیشن سسٹم کی بنیاد ہے۔ صارف ایپلیکیشن میں جو اسکرین دیکھتا ہے وہ Navigator اسٹیک میں موجود ایک Route آبجیکٹ کے ذریعے پیش کی جاتی ہے۔ Route اسکرین کو کنٹرول کوڈ سے تجرید کرتی ہے: Navigator Route کو شامل اور ہٹاتا ہے، جبکہ Route کے اندر وہ انٹرفیس ہوتا ہے جو صارف دیکھتا ہے۔ یہ فن تعمیر نیویگیشن اور ڈسپلے کے درمیان ذمہ داری کو الگ کرتا ہے۔

سادہ widget تبدیلی کے برعکس، Route عام widgets کے لیے دستیاب نہ ہونے والی خدمات فراہم کرتی ہے: ModalBarrier (ڈائیلاگ کھلنے پر پس منظر کو مدھم کرنا)، داخلے اور اخراج کی اینیمیشن کنٹرول، Android پر ہارڈویئر بیک بٹن ہینڈلنگ اور اسکرینوں کے درمیان ہموار منتقلی کے لیے Hero اینیمیشن کے ساتھ انضمام۔

Flutter Cookbook (2026) کے مطابق، Route Hero اینیمیشن کے لیے ایک اہم عنصر ہے: ایک Route پر Hero widget خود بخود اگلی Route پر Hero widget میں منتقلی کو اینیمیٹ کرتا ہے، جس سے “اڑنے” والے عنصر کا اثر پیدا ہوتا ہے۔ یہ ممکن ہے کیونکہ Route اینیمیشن کے دوران دونوں اسکرینوں کو Overlay میں رکھتی ہے۔

نیویگیشن کے تعمیراتی بلاک کے طور پر Route

Route سادہ موبائل ایپلیکیشنز (Navigator 1.0 کے ذریعے) اور گہرے لنکس والے پیچیدہ منظرناموں (Navigator 2.0) دونوں کی بنیاد ہے۔ Navigator 2.0 میں، Route ایک Page کی نمائندگی کرتی ہے جسے RouterDelegate روٹ کنفیگریشن سے تبدیل کرتا ہے۔ لہذا، منتخب کردہ طریقہ کار یا پیکیج سے قطع نظر، کسی بھی فلٹر نیویگیشن سسٹم کے ساتھ کام کرنے کے لیے Route کو سمجھنا ضروری ہے۔

Route کی اقسام: MaterialPageRoute اور CupertinoPageRoute

Flutter Route کے کئی بلٹ ان نفاذ فراہم کرتا ہے، ہر ایک رویے کو مخصوص پلیٹ فارم کے مطابق ڈھالتا ہے۔ صحیح Route قسم کا انتخاب صارف کے تجربے کو متاثر کرتا ہے: Android پر Material اینیمیشن اور 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 کے لائف سائیکل کو Route کے اندر State کے لائف سائیکل کے ساتھ الجھانا نہیں چاہیے۔ Route کے اندر StatefulWidget کا اپنا initState اور dispose ہوتا ہے، جو بالترتیب منتقلی اور ضائع شدہ مراحل کے دوران کہا جاتا ہے۔ Route اپنے اندرونی State سے زیادہ دیر زندہ رہتی ہے — Route Overlay میں تب بھی رہتی ہے جب اس کے widgets عارضی طور پر دوسری Route سے چھپے ہوں۔

Route کے ذریعے اسکرینوں کے درمیان ڈیٹا کی منتقلی

Route داخلے (تخلیق کے وقت) اور اخراج (مکمل ہونے پر) دونوں پر ڈیٹا منتقل کرنے کے طریقہ کار فراہم کرتی ہے۔ Route کے ذریعے ڈیٹا کی مناسب منتقلی عالمی متغیرات اور InheritedWidget کی ضرورت کو ختم کرتی ہے، نیویگیشن کو ٹائپ سیف اور پیش قیاس بناتی ہے۔

نئی اسکرین پر ڈیٹا منتقل کرنے کے لیے، وصول کرنے والے widget کے کنسٹرکٹر یا Navigator.pushNamed میں arguments پیرامیٹر استعمال کریں۔ Route کے اندر، ڈیٹا RouteSettings.arguments کے ذریعے قابل رسائی ہے، جو Route آبجیکٹ میں محفوظ ہوتا ہے۔ یہ طریقہ کار تمام Route اقسام کے لیے کام کرتا ہے — MaterialPageRoute، CupertinoPageRoute اور کسٹم نفاذ۔

ڈیٹا واپس کرنے کے لیے، Navigator.pop(context, result) کی دوسری دلیل استعمال کریں۔ Navigator.push Future لوٹاتا ہے، جو pop کو دی گئی قدر سے مکمل ہوتا ہے۔ اگر pop بغیر دلیل کے کہا جائے تو Future null سے مکمل ہوتا ہے۔ یہ طریقہ کار Android میں startActivityForResult اور iOS میں completion handler کے مشابہ ہے، لیکن Dart Futures کے ذریعے لاگو کیا گیا ہے۔

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 مکمل علیحدگی کو یقینی بناتا ہے: تفصیل والی اسکرین پر ڈرافٹ فہرست کی حالت کو متاثر نہیں کرتے۔