Route — bu nima, turlari va Flutter'da marshrutlarni yaratish

Flutter'da Route nima

Route — Flutter navigatsiya tizimining asosidir. Foydalanuvchi ilovada ko'rgan har bir ekran Navigator stekidagi Route obyekti bilan ifodalanadi. Route ekranni boshqaruv kodidan abstraksiya qiladi: Navigator Route'ni qo'shadi va olib tashlaydi, Route ichida esa foydalanuvchi ko'rgan interfeys joylashgan. Bunday arxitektura navigatsiya va ko'rsatish o'rtasida mas'uliyatni ajratadi.

Oddiy vidjetlarni almashtirishdan farqli o'laroq, Route oddiy vidjetlar uchun mavjud bo'lmagan xizmatlarni taqdim etadi: ModalBarrier (dialog ochiq bo'lganda fonni qoraytirish), kirish va chiqish animatsiyasini boshqarish, Android'da apparat “Orqaga” tugmasini qayta ishlash va ekranlar o'rtasida silliq o'tishlar uchun Hero animatsiyasi bilan integratsiya.

Flutter Cookbook (2026) ga ko'ra, Route Hero animatsiyasi uchun asosiy elementdir: bir Route'dagi Hero vidjeti avtomatik ravishda keyingi Route'dagi Hero vidjetiga o'tishni animatsiya qilib, “uchuvchi” element effektini yaratadi. Bu Route animatsiya vaqtida ikkala ekranni Overlay'da saqlashi tufayli mumkin.

Navigatsiyaning qurilish bloki sifatida Route

Route ham oddiy mobil ilovalar (Navigator 1.0 orqali), ham murakkab chuqur havolalar (Navigator 2.0) uchun asosdir. Navigator 2.0'da Route RouterDelegate marshrut konfiguratsiyasidan o'zgartiradigan Page'ni ifodalaydi. Shunday qilib, Route'ni tushunish Flutter'ning istalgan navigatsiya tizimi bilan ishlash uchun zarur — tanlangan yondashuv yoki paketdan qat'iy nazar.

Route turlari: MaterialPageRoute va CupertinoPageRoute

Flutter bir nechta o'rnatilgan Route tatbiqlarini taqdim etadi, ularning har biri xatti-harakatni ma'lum platformaga moslashtiradi. To'g'ri Route turini tanlash foydalanuvchi tajribasiga ta'sir qiladi: Android'da Material animatsiyasi va iOS'da Cupertino animatsiyasi “mahalliy” ilova hissini yaratadi.

MaterialPageRoute: Android uchun standart

MaterialPageRoute — eng ko'p ishlatiladigan Route tatbiqi. Yangi ekranning kirishini pastdan yuqoriga asta-sekin paydo bo'lish bilan animatsiya qiladi. Chiqishda ekran yuqoridan pastga animatsiya qilinib, dastlabki holatga qaytadi. Asboblar paneli (AppBar) va ekran mazmuni alohida animatsiya qilinadi, ierarxiya effektini yaratadi.

CupertinoPageRoute: iOS navigatsiya uslubi

CupertinoPageRoute iOS'dagi UINavigationController'ni taqlid qiladi. Yangi ekran o'ngdan kirib, oldingisini yopadi. Asosiy xususiyat — CupertinoBackGestureDetector orqali amalga oshirilgan interaktiv orqaga surish imo-ishorasini qo'llab-quvvatlash. Bu imo-ishora hatto animatsiya o'rtasida ham ishlanadi va iPhone foydalanuvchilariga tanish bo'lgan tabiiy xatti-harakatni ta'minlaydi.

Route ning hayotiy sikli: yaratishdan yo'q qilishgacha

Route oddiy StatefulWidget'ning hayotiy siklidan farq qiladigan o'z hayotiy siklga ega. Bu siklni tushunish ma'lumotlarni to'g'ri ishga tushirish, oqimlarga obuna bo'lish va ekran yopilganda resurslarni bo'shatish uchun zarur.

Route hayotiy siklining bosqichlari

Route hayotiy sikli to'rt asosiy bosqichdan iborat. Transition — Route yaratiladi va kirishda animatsiya qilinadi (didPush chaqiriladi). Active — Route to'liq ko'rsatiladi va foydalanuvchi bilan o'zaro aloqada bo'ladi. Inactive — boshqa Route joriy ekranni yopadi (dialog, pastki ekran), lekin Route stekda qoladi. Disposed — Route stekdan olib tashlanadi va yo'q qilinadi, didPop va dispose chaqiriladi.

Route ning hayotiy sikl metodlari maxsus tatbiqda o'zgartirilishi mumkin. Masalan, didPop Route stekdan olib tashlanganda chaqiriladi — bu yerda ma'lumotlarning qoralama versiyasini saqlash mumkin. didChangeNext stekdagi keyingi Route o'zgarganda chaqiriladi — navigatsiya tarixi o'zgarganda UI'ni yangilash uchun foydali.

Flutter API Route.didPop (2026) ga ko'ra, Route ning hayotiy siklini Route ichidagi State ning hayotiy sikli bilan aralashtirmaslik muhim. Route ichidagi StatefulWidget o'z initState va dispose metodlariga ega bo'lib, ular mos ravishda Transition va Disposed bosqichlarida chaqiriladi. Route o'z ichki State'idan uzoqroq yashaydi — Route uning vidjetlari boshqa Route tomonidan vaqtincha yashirilgan bo'lsa ham Overlay'da qoladi.

Route orqali ekranlar o'rtasida ma'lumot uzatish

Route ham kirishda (yaratilganda), ham chiqishda (tugatilganda) ma'lumot uzatish mexanizmlarini taqdim etadi. Route orqali to'g'ri ma'lumot uzatish global o'zgaruvchilar va InheritedWidget'ga bo'lgan ehtiyojni bartaraf etib, navigatsiyani tip xavfsizligi bo'lgan va bashorat qilinadigan qiladi.

Yangi ekranga ma'lumot uzatish uchun qabul qiluvchi vidjetning konstruktori yoki Navigator.pushNamed'dagi arguments argumenti ishlatiladi. Route ichida ma'lumotlar Route obyektida saqlanadigan RouteSettings.arguments orqali mavjud. Bu yondashuv barcha Route turlari uchun ishlaydi — MaterialPageRoute, CupertinoPageRoute va maxsus tatbiqlar.

Ma'lumotni qaytarish uchun Navigator.pop(context, result) ikkinchi argumenti ishlatiladi. Navigator.push pop'ga uzatilgan qiymat bilan tugallanadigan Future qaytaradi. Agar pop argumentsiz chaqirilsa, Future null bilan tugallanadi. Bu mexanizm Android'dagi startActivityForResult va iOS'dagi completion handler'ning analogidir, lekin Dart Futures orqali amalga oshirilgan.

Route konstruktori orqali ma'lumot uzatish misoli

MaterialPageRoute bilan to'g'ridan-to'g'ri Navigator.push chaqiruvida ma'lumotlar maqsadli ekranning konstruktori orqali uzatiladi. MethodChannel ishlatilmaydi — bu toza Dart o'zaro ta'siri. Bu yondashuv murakkab obyektlarni tip xavfsiz uzatish uchun afzal.

Maxsus Route yaratish misoli

Maxsus Route ni o'z animatsiyasi va ma'lumot uzatishi bilan yaratish misolini ko'rib chiqaylik. PageRouteBuilder animatsiya egri chizig'i va davomiyligi ustidan to'liq nazorat bilan kirish va chiqish animatsiyasini belgilashga imkon beradi.

// Siljitish animatsiyasi bilan maxsus 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),
));

// Ekrandan ma'lumotni qaytar
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Tanla'),
);

// Chaqiruvchi ekranda natijani olish
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Tanlandi: ${result['selected']}');
}

Misolda PageRouteBuilder shaffoflik bilan pastdan siljitish maxsus animatsiyasini belgilaydi. transitionDuration animatsiya tezligini o'rnatadi. Kod shuningdek natijani uzatishni namoyish etadi: tafsilot ekrani foydalanuvchi tanlovi bilan Map qaytaradi, chaqiruvchi ekran esa bu ma'lumotlarni push'dan Future orqali oladi. Route to'liq izolyatsiyani ta'minlaydi: tafsilot ekranidagi qoralamalar ro'yxat holatiga ta'sir qilmaydi.