Navigator: مدیریت صفحه ها در Flutter

Navigator در Flutter چیست

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) به API تصریحی (Navigator 2.0) تکامل یافته است. Navigator 1.0 مستقیماً از روش های push/pop استفاده می‌کند که برای سناریوهای ساده مناسب است. Navigator 2.0 (Router) برای برنامه هایی با لینکهای عمیق، ناوبری سازگار و مسیریابی وب مناسب است.

Navigator در داخل چگونه کار می‌کند

در داخل، Navigator از Overlay استفاده می‌کند — یک ویجت ویژه که Route ها را یکی بر بالای دیگری نمایش می‌دهد. هر Route موقعیت خود را در Overlay با شاخص Z مطابق با عمق در پشته ایجاد می‌کند. این توضیح می‌دهد چرا در push صفحه جدید با انیمیشن بالای قبلی نمایش داده می‌شود و در pop، صفحه قبلی آماده نمایش است: آن نابود نشده، فقط در Overlay زیر جدید باقی مانده است.

برای انیمیشن انتقالات، Navigator از PageTransitionsTheme استفاده می‌کند که می‌توان آن را در ThemeData تغییر داد. انیمیشن های پلتفرم از طریق CupertinoPageRoute برای iOS (کشیدن از راست) و MaterialPageRoute برای Android (کشیدن از پایین) تنظیم می‌شوند. Navigator به صورت خودکار انیمیشن مناسب را با استفاده از PlatformRoute انتخاب می‌کند.

روش های Navigator: push، pop و pushReplacement

Navigator یک مجموعه روش برای مدیریت پشته Route ارائه می‌دهد. هر روش یک وظیفه ناوبری مشخص را انجام می‌دهد — از یک انتقال ساده تا جایگزینی کامل تاریخچه صفحه ها. روش های اصلی را با مثال های استفاده بررسی می‌کنیم.

Push و Pop: عملیات پایه

روش push یک Route می‌گیرد و یک Future با نتیجه ارسال شده در pop بازمی‌گرداند. این امکان دریافت داده ها از صفحه ای که به آن می‌رویم را فراهم می‌کند. به عنوان مثال، یک صفحه انتخاب تاریخ می‌تواند DateTime را از طریق Navigator.pop(context, selectedDate) بازگرداند. روش pop بدون آرگومان null و با آرگومان مقدار را به صفحه فراخواننده برمی‌گرداند.

PushReplacement: جایگزینی صفحه

pushReplacement Route فعلی را با یک Route جدید جایگزین می‌کند و فعلی را از پشته حذف می‌کند. این برای سناریوهایی که کاربر نباید به صفحه قبلی بازگردد حیاتی است. مثال تیپیک — صفحه ورود: پس از ورود موفقیت‌آمیز، صفحه فعلی با صفحه اصلی جایگزین می‌شود و دکمه «بازگشت» به فرم ورود بازنمی‌گردد.

مسیرهای نام‌گذاری شده و onGenerateRoute

Navigator از ناوبری از طریق مسیرهای نام‌گذاری شده از طریق روش pushNamed پشتیبانی می‌کند. به جای ایجاد مستقیم Route، توسعه دهنده یک شناسه رشته‌ای مشخص می‌کند و Navigator بر اساس پیکربندی در MaterialApp به صورت خودکار یک Route ایجاد می‌کند. این کد را ساده می‌کند و تعریف مسیرها را در یک مکان متمرکز می‌کند.

مسیرهای نام‌گذاری شده از طریق ویژگی routes در MaterialApp تعریف می‌شوند، جایی که هر کلید یک رشته مسیر و مقدار یک تابع است که Widget بازمی‌گرداند. برای مسیرهای دینامیک (با پارامترها)، onGenerateRoute استفاده می‌شود — یک فراخوانی که RouteSettings را دریافت و Route بازمی‌گرداند. این امکان ارسال آرگومان ها از طریق arguments و پیاده‌سازی ناوبری عمیق را فراهم می‌کند.

به گزارش Flutter Cookbook (2026)، ارسال آرگومان ها از طریق pushNamed با پارامتر arguments: Object? انجام می‌شود. صفحه دریافت کننده آرگومان ها را از طریق ModalRoute.of(context)!.settings.arguments استخراج می‌کند که انتقال ایمن از نظر نوع داده را بدون متغیرهای سراسری یا InheritedWidget تضمین می‌کند.

مدیریت مسیرهای ناشناخته

ویژگی onUnknownRoute در MaterialApp مواردی را که 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 پیکربندی را به لیست Route تبدیل می‌کند، و BackButtonDispatcher دکمه سیستم «بازگشت» را مدیریت می‌کند. چنین معماری ناوبری را کاملاً قابل پیش‌بینی و آزمون پذیر می‌سازد.

برای ساده سازی کار با Navigator 2.0، بسته های پیچیده وجود دارند: go_router (توسیه شده توسط Google)، auto_route و beamer. go_router یک DSL تصریحی برای تعریف مسیرها با پشتیبانی از ناوبری تودرو، بازرسانی ها و لینکهای عمیق بدون پیاده‌سازی دستی RouterDelegate فراهم می‌کند. به گزارش pub.dev (2026)، go_router در 35% پروژه های جدید Flutter که رویکرد تصریحی را ترجیح می‌دهند استفاده می‌شود.

مثال ناوبری در برنامه Flutter

یک مثال Navigator را با مسیرهای نام‌گذاری شده و انتقال داده بین صفحه ها بررسی می‌کنیم. کد یک صفحه لیست محصولات، انتقال به صفحه جزئیات و بازگشت با نتیجه را نمایش می‌دهد.

// پیکربندی مسیر در 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(),
    );
  },
)

// ناوبری با انتقال داده
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// دریافت داده در صفحه دریافت کننده
final args = ModalRoute.of(context)!.settings.arguments as String;

// جایگزینی صفحه پس از ورود
Navigator.pushReplacementNamed(context, '/home');

// پاک کردن پشته تا صفحه اصلی
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

در مثال، Navigator.pushNamed شناسه محصول را به صفحه جزئیات ارسال می‌دهد. در بازگشت از طریق Navigator.pop(context, updatedProduct)، صفحه فراخواننده داده های به‌روز شده را در متغیر result دریافت می‌کند. pushReplacementNamed صفحه فعلی را پس از ورود جایگزین می‌کند، و pushNamedAndRemoveUntil با شرط (route) => false پشته را کاملاً پاک می‌کند و از بازگشت به صفحه های قبلی جلوگیری می‌کند.