Navigator: Flutter-da ekranlarni boshqarish

Flutter-da Navigator nima

Navigator — bu Flutter ilovasida ekran navigatsiyasini amalga oshiruvchi Route obyektlari stekini boshqaruvchi vidjetdir. Har bir push chaqiruvi yangi Route-ni stekning tepasiga joylashtiradi, pop yuqoridagi Route-ni olib tashlaydi va avvalgi ekranga qaytadi. MaterialApp butun ilova uchun avtomatik Navigator yaratadi va uni Navigator.of(context) orqali mavjud qiladi.

StatefulWidget-dan farqli o‘laroq, unda kontentni almashtirish bitta vidjet ichida setState orqali amalga oshadi, Navigator o‘z hayotiy sikliga ega butun ekranlar bilan ishlaydi. Stekdagi har bir Route o‘zining BuildContext-ga ega izolyatsiya qilingan holatdir, bu xotira oqishining oldini oladi va bog‘liqliklarni boshqarishni soddalashtiradi. Pop chaqirilganda, foydalanilmayotgan Route yo‘q qilinadi va resurslar bo‘shatiladi.

Flutter Navigation Guide (2026) ga ko‘ra, Navigator imperativ API-dan (Navigator 1.0) deklarativga (Navigator 2.0) qadar evolyutsiyani bosib o‘tgan. Navigator 1.0 to‘g‘ridan-to‘g‘ri push/pop metodlaridan foydalanadi, bu oddiy stsenariylar uchun qulay. Navigator 2.0 (Router) chuqur havolalar, adaptiv navigatsiya va veb marshrutlash bilan ilovalar uchun mos keladi.

Navigator ichki qanday ishlaydi

Ichki Navigator Overlay — Route-larni bir-birining ustida ko‘rsatadigan maxsus vidjetdan foydalanadi. Har bir Route stekdagi chuqurlikka mos keladigan Z-indeks bilan Overlay-da o‘z pozitsiyasini yaratadi. Bu push vaqtida nima uchun yangi ekran avvalgisining ustida animatsiya qilinishini, pop vaqtida esa avvalgi ekran nima uchun ko‘rsatishga tayyor ekanligini tushuntiradi: u yo‘q qilinmagan, shunchaki yangisining ostida Overlay-da qolgan.

O‘tish animatsiyalari uchun Navigator ThemeData da qayta belgilanishi mumkin bo‘lgan PageTransitionsTheme-dan foydalanadi. Platforma animatsiyalari iOS uchun CupertinoPageRoute (o‘ngdan surish) va Android uchun MaterialPageRoute (pastdan surish) orqali o‘rnatiladi. Navigator PlatformRoute dan foydalanganda avtomatik ravishda mos animatsiyani tanlaydi.

Navigator metodlari: push, pop va pushReplacement

Navigator Route stekini boshqarish uchun bir qator metodlarni taqdim etadi. Har bir metod oddiy o‘tishdan tortib ekran tarixini to‘liq almashtirishgacha bo‘lgan muayyan navigatsiya vazifasini hal qiladi. Asosiy metodlarni foydalanish misollari bilan ko‘rib chiqamiz.

Push va Pop: asosiy operatsiyalar

push metodi Route-ni qabul qiladi va pop vaqtida uzatilgan natija bilan Future qaytaradi. Bu o‘tgan ekrandan ma’lumotlarni olish imkonini beradi. Masalan, sana tanlash ekrani Navigator.pop(context, selectedDate) orqali DateTime qaytarishi mumkin. pop metodi argumentsiz null qaytaradi, argument bilan esa qiymatni chaqiruvchi ekranga uzatadi.

PushReplacement: ekranni almashtirish

pushReplacement joriy Route-ni yangisiga almashtiradi, joriyni stekdan olib tashlaydi. Bu foydalanuvchi avvalgi ekranga qaytmasligi kerak bo‘lgan stsenariylarda juda muhimdir. Oddiy misol — kirish ekrani: muvaffaqiyatli kirishdan so‘ng, joriy ekran asosiy ekran bilan almashtiriladi va „Orqaga” tugmasi kirish formasiga qaytmaydi.

Nomli marshrutlar va onGenerateRoute

Navigator pushNamed metodi orqali nomli marshrutlar bo‘yicha navigatsiyani qo‘llab-quvvatlaydi. To‘g‘ridan-to‘g‘ri Route yaratish o‘rniga, dasturchi matn identifikatorini ko‘rsatadi va Navigator MaterialApp-dagi konfiguratsiya asosida avtomatik Route yaratadi. Bu kodni soddalashtiradi va marshrutlar ta’rifini bir joyda markazlashtiradi.

Nomli marshrutlar MaterialApp-dagi routes xususiyati orqali belgilanadi, bu erda har bir kalit yo‘l satri, qiymat esa Widget qaytaruvchi funksiyadir. Parametrli dinamik marshrutlar uchun onGenerateRoute — RouteSettings ni qabul qilib, Route qaytaruvchi qayta chaqiruv ishlatiladi. Bu arguments orqali argumentlarni uzatish va chuqur navigatsiyani amalga oshirish imkonini beradi.

Flutter Cookbook (2026) ga ko‘ra, pushNamed orqali argumentlarni uzatish arguments: Object? parametri yordamida amalga oshiriladi. Qabul qiluvchi ekran argumentlarni ModalRoute.of(context)!.settings.arguments orqali chiqaradi, bu global o‘zgaruvchilar yoki InheritedWidget-larsiz xavfsiz ma’lumot uzatishni ta’minlaydi.

Noma’lum marshrutlarni boshqarish

MaterialApp-dagi onUnknownRoute xususiyati pushNamed mavjud bo‘lmagan marshrut bilan chaqirilganda holatlarni boshqaradi. Bu 404 ekranini ko‘rsatish yoki asosiy sahifaga yo‘naltirish uchun foydalidir. onGenerateRoute bilan birgalikda barcha mumkin bo‘lgan navigatsiya stsenariylarining to‘liq qamrab olinishini ta’minlaydi.

Navigator 2.0 va deklarativ Router navigatsiyasi

Navigator 2.0 (Router API sifatida ham tanilgan) — bu Flutter 2.0 da taqdim etilgan navigatsiyaga deklarativ yondashuvdir. Dasturchi push/pop chaqiradigan imperativ Navigator 1.0 dan farqli o‘laroq, Router navigatsiyani holat orqali boshqaradi, brauzer URL-ni joriy ekran bilan avtomatik sinxronlashtiradi. Bu, ayniqsa, veb ilovalar va desktop versiyalari uchun muhimdir.

Navigator 2.0 arxitekturasi uchta asosiy komponentdan iborat: RouteInformationParser URL-ni marshrut konfiguratsiyasiga tahlil qiladi, RouterDelegate konfiguratsiyani Route ro‘yxatiga aylantiradi, BackButtonDispatcher esa tizimning „Orqaga” tugmasini boshqaradi. Bunday arxitektura navigatsiyani to‘liq bashorat qilish mumkin va sinovdan o‘tkazish mumkin qiladi.

Navigator 2.0 bilan ishlashni soddalashtirish uchun o‘ram paketlari mavjud: go_router (Google tomonidan tavsiya etiladi), auto_route va beamer. go_router RouterDelegate ni qo‘lda amalga oshirmasdan, ichki navigatsiya, yo‘naltirishlar va chuqur havolalarni qo‘llab-quvvatlagan holda marshrutlarni belgilash uchun deklarativ DSL ni taqdim etadi. pub.dev (2026) ma’lumotlariga ko‘ra, go_router deklarativ yondashuvni afzal ko‘rgan yangi Flutter loyihalarining 35 foizida qo‘llaniladi.

Flutter ilovasida navigatsiya namunasi

Navigator namunasini nomli marshrutlar va ekranlar o‘rtasida ma’lumot uzatish bilan ko‘rib chiqamiz. Kod mahsulotlar ro‘yxati ekranini, tafsilotlar ekraniga o‘tishni va natija bilan qaytishni namoyish etadi.

// MaterialApp da marshrut konfiguratsiyasi
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(),
    );
  },
)

// Ma’lumot uzatish bilan navigatsiya
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Qabul qiluvchi ekranda ma’lumotlarni olish
final args = ModalRoute.of(context)!.settings.arguments as String;

// Kirishdan so‘ng ekranni almashtirish
Navigator.pushReplacementNamed(context, '/home');

// Stekni asosiy ekrangacha tozalash
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Misolda, Navigator.pushNamed mahsulot identifikatorini tafsilotlar ekraniga uzatadi. Navigator.pop(context, updatedProduct) orqali qaytganda, chaqiruvchi ekran result o‘zgaruvchisida yangilangan ma’lumotlarni oladi. pushReplacementNamed avtorizatsiyadan so‘ng joriy ekranni almashtiradi, pushNamedAndRemoveUntil esa (route) => false sharti bilan stekni to‘liq tozalaydi, avvalgi ekranlarga qaytishning oldini oladi.