Navigator: یہ کیا ہے، Flutter میں اسکرین کا انتظام

Flutter میں Navigator کیا ہے

Navigator ایک ویجیٹ ہے جو Route آبجیکٹس کے اسٹیک کا انتظام کرتا ہے، Flutter ایپلیکیشن میں اسکرین نیویگیشن کو نافذ کرتا ہے۔ push کی ہر کال ایک نیا Route اسٹیک کی چوٹی پر رکھتی ہے، pop سب سے اوپر والے Route کو ہٹاتا ہے اور پچھلی اسکرین پر واپس آتا ہے۔ MaterialApp پوری ایپلیکیشن کے لیے خود بخود ایک Navigator بناتا ہے، اسے Navigator.of(context) کے ذریعے قابل رسائی بناتا ہے۔

StatefulWidget کے برعکس، جہاں مواد کی تبدیلی ایک ہی ویجیٹ کے اندر setState کے ذریعے ہوتی ہے، Navigator پوری اسکرینوں کے ساتھ کام کرتا ہے جن کی اپنی زندگی کا چکر ہوتا ہے۔ اسٹیک میں ہر Route اپنے BuildContext کے ساتھ ایک الگ حالت ہے، جو میموری کے رساو کو روکتا ہے اور انحصار کے انتظام کو آسان بناتا ہے۔ جب pop کال کی جاتی ہے، تو غیر استعمال شدہ Route تباہ ہو جاتا ہے، وسائل کو آزاد کرتا ہے۔

Flutter نیویگیشن گائیڈ (2026) کے مطابق، Navigator لازمی API (Navigator 1.0) سے اعلانیہ API (Navigator 2.0) تک تیار ہوا ہے۔ Navigator 1.0 براہ راست push/pop طریقے استعمال کرتا ہے، جو سادہ منظرناموں کے لیے آسان ہے۔ Navigator 2.0 (Router) گہرے لنکس، انکولی نیویگیشن اور ویب روٹنگ والی ایپلیکیشنز کے لیے موزوں ہے۔

Navigator کیسے کام کرتا ہے

اندرونی طور پر، Navigator Overlay استعمال کرتا ہے — ایک خاص ویجیٹ جو Routes کو ایک دوسرے کے اوپر دکھاتا ہے۔ ہر Route اسٹیک میں اپنی گہرائی کے مطابق z-index کے ساتھ 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 نئے Flutter پروجیکٹس میں سے 35% میں استعمال ہوتا ہے جو اعلانیہ طریقہ کو ترجیح دیتے ہیں۔

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 پروڈکٹ ID کو تفصیلی اسکرین پر بھیجتا ہے۔ Navigator.pop(context, updatedProduct) کے ذریعے واپسی پر، کال کرنے والی اسکرین result متغیر میں اپ ڈیٹ کردہ ڈیٹا حاصل کرتی ہے۔ pushReplacementNamed اجازت کے بعد موجودہ اسکرین کو تبدیل کرتا ہے، اور شرط (route) => false کے ساتھ pushNamedAndRemoveUntil مکمل طور پر اسٹیک کو صاف کرتا ہے، پچھلی اسکرینوں پر واپس نیویگیشن کو روکتا ہے۔