Navigator: Flutter-da ekranların idarə edilməsi

Flutter-da Navigator nədir

Navigator — Flutter tətbiqində ekran naviqasiyasını həyata keçirən, Route obyektləri yığınını idarə edən vidjetdir. Hər push çağırışı yeni Route-u yığının yuxarısına yerləşdirir, pop yuxarıdakı Route-u silir və əvvəlki ekrana qayıdır. MaterialApp bütöv tətbiq üçün avtomatik Navigator yaradır və onu Navigator.of(context) vasitəsilə əlçatan edir.

StatefulWidget-dən fərqli olaraq, burada məzmun dəyişikliyi bir vidjet daxilində setState vasitəsilə baş verir, Navigator öz həyat dövrü olan bütöv ekranlarla işləyir. Yığındakı hər Route öz BuildContext-i ilə təcrid olunmuş vəziyyətdir, bu da yaddaş sızıntılarının qarşısını alır və asılılıqların idarə edilməsini sadələşdirir. Pop çağırılarkən istifadə olunmayan Route məhv edilir, resursları azad edir.

Flutter Navigation Guide (2026)-ya görə, Navigator imperativ API-dən (Navigator 1.0) deklarativə (Navigator 2.0) doğru təkamül keçirmişdir. Navigator 1.0 birbaşa push/pop metodlarından istifadə edir, bu sadə ssenarilər üçün əlverişlidir. Navigator 2.0 (Router) dərin keçidlər, adaptiv naviqasiya və veb marşrutlaşdırması olan tətbiqlər üçün uyğundur.

Navigator daxildən necə işləyir

Daxildə Navigator Route-ları bir-birinin üzərində göstərən xüsusi vidjet olan Overlay-dən istifadə edir. Hər Route yığındakı dərinliyə uyğun z-indeksi ilə Overlay-də öz mövqeyini yaradır. Bu, push zamanı yeni ekranın niyə əvvəlkinin üzərində animasiya edildiyini, pop zamanı isə əvvəlki ekranın niyə göstərilməyə hazır olduğunu izah edir: o məhv edilməyib, sadəcə yeninin altında Overlay-də qalmışdır.

Keçid animasiyaları üçün Navigator ThemeData-də dəyişdirilə bilən PageTransitionsTheme istifadə edir. Platforma animasiyaları iOS üçün CupertinoPageRoute (sağdan sürüştürmə) və Android üçün MaterialPageRoute (aşağıdan sürüştürmə) vasitəsilə təyin edilir. Navigator PlatformRoute istifadə edərkən avtomatik düzgün animasiyanı seçir.

Navigator metodları: push, pop və pushReplacement

Navigator Route yığınını idarə etmək üçün metodlar dəsti təqdim edir. Hər metod sadə keçiddən ekran tarixçəsinin tam dəyişdirilməsinə qədər müəyyən naviqasiya tapşırığını həll edir. Əsas metodları istifadə nümunələri ilə nəzərdən keçirɘk.

Push və Pop: əsas əməliyyatlar

push metodu Route qəbul edir və pop zamanı ötürülən nəticə ilə Future qaytarır. Bu, keçdiyimiz ekrandan məlumat almağa imkan verir. Məsələn, tarix seçimi ekranı Navigator.pop(context, selectedDate) vasitəsilə DateTime qaytara bilər. pop metodu arqumentsiz null qaytarır, arqumentlə isə dəyəri çağıran ekrana ötürür.

PushReplacement: ekranın əvəz edilməsi

pushReplacement cari Route-u yenisi ilə əvəz edir, cari olanı yığından silir. Bu, istifadəçinin əvvəlki ekrana qayıtmamalı olduğu ssenarilərdə vacibdir. Tipik nümunə — giriş ekranı: uğurlu daxil olduqdan sonra cari ekran əsas ekranla əvəz edilir və „Geri” düyməsi giriş formasına qayıtmır.

Adlandırılmış marşrutlar və onGenerateRoute

Navigator pushNamed metodu vasitəsilə adlandırılmış marşrutlar üzrə naviqasiyanı dəstəkləyir. Birbaşa Route yaratmaq əvəzinə, proqramçı mətn identifikatoru göstərir və Navigator MaterialApp-dəki konfiqurasiya əsasında avtomatik Route yaradır. Bu, kodu sadələşdirir və marşrutların tərifini bir yerdə mərkəzləşdirir.

Adlandırılmış marşrutlar MaterialApp-də routes xassəsi vasitəsilə təyin edilir, burada hər açar yol sətri, dəyər isə Widget qaytaran funksiyadır. Parametrli dinamik marşrutlar üçün onGenerateRoute — RouteSettings qəbul edib Route qaytaran geri çağırış istifadə olunur. Bu, arguments vasitəsilə arqumentləri ötürməyə və dərin naviqasiyanı həyata keçirməyə imkan verir.

Flutter Cookbook (2026)-ya görə, pushNamed vasitəsilə arqumentlərin ötürülməsi arguments: Object? parametri ilə həyata keçirilir. Qəbul edən ekran arqumentləri ModalRoute.of(context)!.settings.arguments vasitəsilə çıxarır, bu da qlobal dəyişənlər və ya InheritedWidget olmadan tip təhlükəsiz məlumat ötürülməsini təmin edir.

Naməlum marşrutların idarə edilməsi

MaterialApp-də onUnknownRoute xassəsi pushNamed mövcud olmayan marşrutla çağırıldıqda halları idarə edir. Bu, 404 ekranı göstərmək və ya əsas səhifəyə yönləndirmək üçün faydalıdır. onGenerateRoute ilə birlikdə bütün mümkün naviqasiya ssenarilərinin tam əhatə olunmasını təmin edir.

Navigator 2.0 və deklarativ Router naviqasiyası

Navigator 2.0 (Router API kimi də tanınır) — Flutter 2.0-da təqdim edilmiş naviqasiyaya deklarativ yanaşmadır. Proqramçının push/pop çağırdığı imperativ Navigator 1.0-dən fərqli olaraq, Router vəziyyət vasitəsilə naviqasiyanı idarə edir, brauzer URL-ni cari ekranla avtomatik sinxronlaşdırır. Bu, xüsusilə veb tətbiqlər və masaüstü versiyalar üçün vacibdir.

Navigator 2.0 arxitekturası üç əsas komponentdən ibarətdir: RouteInformationParser URL-i marşrut konfiqurasiyasına çevirir, RouterDelegate konfiqurasiyanı Route siyahısına çevirir, BackButtonDispatcher isə sistem „Geri” düyməsini idarə edir. Belə arxitektura naviqasiyanı tamamilə proqnozlaşdırıla bilən və test edilə bilən edir.

Navigator 2.0 ilə işi sadələşdirmək üçün sarğıcı paketlər mövcuddur: go_router (Google tərəfindən tövsiyə olunur), auto_route və beamer. go_router RouterDelegate-nin əl ilə tətbiqi olmadan iç-içə naviqasiya, yönləndirmələr və dərin keçidlər dəstəyi ilə marşrutları təyin etmək üçün deklarativ DSL təmin edir. pub.dev (2026)-ya görə, go_router deklarativ yanaşmanı üstün tutan yeni Flutter layihələrinin 35%-də istifadə olunur.

Flutter tətbiqində naviqasiya nümunəsi

Navigator nümunəsini adlandırılmış marşrutlar və ekranlar arasında məlumat ötürülməsi ilə nəzərdən keçirɘk. Kod məhsul siyahısı ekranını, təfşürat ekranına keçidi və nəticə ilə qayıdışı nümayiş etdirir.

// MaterialApp-də marşrut konfiqurasiyası
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(),
    );
  },
)

// Məlumat ötürülməsi ilə naviqasiya
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Qəbul edən ekranda məlumatların əldə edilməsi
final args = ModalRoute.of(context)!.settings.arguments as String;

// Girişdən sonra ekranı əvəz et
Navigator.pushReplacementNamed(context, '/home');

// Yığını əsas ekrana qədər təmizlə
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Nümunədə Navigator.pushNamed məhsul identifikatorunu təfşürat ekranına ötürür. Navigator.pop(context, updatedProduct) vasitəsilə qayıdarkən çağıran ekran result dəyişənində yenilənmiş məlumatları alır. pushReplacementNamed avtorizasiyadan sonra cari ekranı əvəz edir, pushNamedAndRemoveUntil isə (route) => false şrti ilə yığını tamamilə təmizləyir, əvvəlki ekranlara qayıdışın qarşısını alır.