Route — bu nədir, növləri və Flutter-də marşrutların yaradılması

Flutter-də Route nədir

Route — Flutter naviqasiya sisteminin əsasıdır. İstifadəçinin tətbiqdə gördüyü hər bir ekran Navigator stekində yerləşən Route obyekti ilə təmsil olunur. Route ekranı idarəetmə kodundan abstraksiya edir: Navigator Route-u əlavə edir və silir, Route-un daxilində isə istifadəçinin gördüyü interfeys yerləşir. Bu arxitektura naviqasiya və göstərmə arasında məsuliyyəti ayırır.

Adi vidjet dəyişdirməsindən fərqli olaraq, Route adi vidjetlər üçün əlçatmaz xidmətlər təqdim edir: ModalBarrier (dialoq açıq olduqda fonun qaraldılması), giriş və çıxış animasiyasının idarə edilməsi, Android-də aparat “Geri” düyməsinin işlənməsi və ekranlar arasında hamar keçidlər üçün Hero animasiyası ilə inteqrasiya.

Flutter Cookbook (2026)-ya görə, Route Hero animasiyası üçün əsas elementdir: bir Route-dakı Hero vidjeti avtomatik olaraq növbəti Route-dakı Hero vidjetinə keçidi animasiya edərək “uçan” element effekti yaradır. Bu, məhz Route-un animasiya zamanı hər iki ekranı Overlay-də saxlaması sayəsində mümkündür.

Naviqasiyanın qurucu bloku kimi Route

Route həm sadə mobil tətbiqlər (Navigator 1.0 vasitəsilə), həm də dərin keçidlərlə mürəkkəb ssenarilər (Navigator 2.0) üçün əsasdır. Navigator 2.0-da Route, RouterDelegate-in marşrut konfiqurasiyasından çevirdiyi Page-i təmsil edir. Beləliklə, Route-u başa düşmək Flutter-in istənilən naviqasiya sistemi ilə işləmək üçün zəruridir — seçilmiş yanaşma və ya paketdən asılı olmayaraq.

Route növləri: MaterialPageRoute və CupertinoPageRoute

Flutter bir neçə daxili Route tətbiqi təqdim edir, hər biri davranışı müəyyən platformaya uyğunlaşdırır. Düzgün Route növünün seçilməsi istifadəçi təcrübəsinə təsir edir: Android-də Material animasiyası və iOS-da Cupertino animasiyası “doğma” tətbiq hissi yaradır.

MaterialPageRoute: Android üçün standart

MaterialPageRoute — ən çox istifadə olunan Route tətbiqidir. Yeni ekranın girişini aşağıdan yuxarıya tədricən görünmə ilə animasiya edir. Çıxış zamanı ekran yuxarıdan aşağıya animasiya edərək ilkin vəziyyətə qayıdır. Alət paneli (AppBar) və ekranın məzmunu ayrıca animasiya edilərək iyerarxiya effekti yaradır.

CupertinoPageRoute: iOS naviqasiya tərzi

CupertinoPageRoute iOS-dan UINavigationController-i təqlid edir. Yeni ekran sağdan daxil olaraq əvvəlkini örtür. Əsas xüsusiyyət — CupertinoBackGestureDetector vasitəsilə tətbiq edilən interaktiv geri sürüşdürmə jestinin dəstəyidir. Bu jest hətta animasiyanın ortasında belə işlənərək iPhone istifadəçilərinə tanış olan təbii davranışı təmin edir.

Route-un həyat dövrü: yaradılmadan məhvə qədər

Route adi StatefulWidget-in həyat dövründən fərqlənən öz həyat dövrünə malikdir. Bu dövrü başa düşmək məlumatların düzgün işə salınması, axınlara abunə olmaq və ekran bağlandıqda resursların boşaldılması üçün zəruridir.

Route-un həyat dövrü mərhələləri

Route-un həyat dövrü dörd əsas mərhələdən ibarətdir. Transition — Route yaradılır və girişdə animasiya edilir (didPush çağırılır). Active — Route tam göstərilir və istifadəçi ilə qarşılıqlı əlaqədə olur. Inactive — digər Route cari olanı örtür (dialoq, alt ekran), lakin Route stekdə qalır. Disposed — Route stekdən silinir və məhv edilir, didPop və dispose çağırılır.

Route-un həyat dövrü metodları xüsusi tətbiqdə dəyişdirilə bilər. Məsələn, didPop Route stekdən silindikdə çağırılır — burada məlumatların qaralama versiyasını saxlamaq olar. didChangeNext stekdə növbəti Route dəyişdikdə çağırılır — naviqasiya tarixçəsi dəyişdikdə UI-ni yeniləmək üçün faydalıdır.

Flutter API Route.didPop (2026)-ya görə, Route-un həyat dövrünü Route daxilindəki State-in həyat dövrü ilə qarışdırmamaq vacibdir. Route daxilindəki StatefulWidget-ın öz initState və dispose metodları var ki, onlar müvafiq olaraq Transition və Disposed mərhələlərində çağırılır. Route öz daxili State-dən daha uzun yaşayır — Route onun vidjetləri başqa bir Route tərəfindən müvəqqəti gizlədilsə belə Overlay-də qalır.

Route vasitəsilə ekranlar arasında məlumat ötürülməsi

Route həm girişdə (yaradılarkən), həm də çıxışda (tamamlandıqda) məlumat ötürmək üçün mexanizmlər təqdim edir. Route vasitəsilə düzgün məlumat ötürülməsi qlobal dəyişənlərə və InheritedWidget-ə ehtiyacı aradan qaldıraraq naviqasiyanı tip təhlükəsizliyi olan və proqnozlaşdırıla bilən edir.

Yeni ekrana məlumat ötürmək üçün qəbul edən vidjetin konstruktoru və ya Navigator.pushNamed-də arguments arqumenti istifadə olunur. Route daxilində məlumatlar Route obyektində saxlanılan RouteSettings.arguments vasitəsilə əlçatandır. Bu yanaşma bütün Route növləri üçün işləyir — MaterialPageRoute, CupertinoPageRoute və xüsusi tətbiqlər.

Məlumatı qaytarmaq üçün Navigator.pop(context, result) ikinci arqumenti istifadə olunur. Navigator.push pop-a ötürülən dəyərlə tamamlanan Future qaytarır. pop arqumentsiz çağırılıbsa, Future null ilə tamamlanır. Bu mexanizm Android-də startActivityForResult və iOS-da completion handler-in analoqudur, lakin Dart Futures vasitəsilə tətbiq edilmişdir.

Route konstruktoru vasitəsilə məlumat ötürülməsi nümunəsi

MaterialPageRoute ilə birbaşa Navigator.push çağırışında məlumatlar hədəf ekranın konstruktoru vasitəsilə ötürülür. MethodChannel istifadə edilmir — bu təmiz Dart qarşılıqlı əlaqəsidir. Bu yanaşma mürəkkəb obyektlərin tip təhlükəsiz ötürülməsi üçün üstünlük təşkil edir.

Xüsusi Route yaratma nümunəsi

Xüsusi Route-un öz animasiyası və məlumat ötürülməsi ilə yaradılması nümunəsinə baxaq. PageRouteBuilder animasiya əyrisi və müddəti üzərində tam nəzarətlə giriş və çıxış animasiyasını təyin etməyə imkan verir.

// Sürüşdürmə animasiyası ilə xüsusi 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 məlumatı qaytar
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Seç'),
);

// Çağıran ekranda nəticəni əldə et
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Seçildi: ${result['selected']}');
}

Nümunədə PageRouteBuilder şəffaflıqla aşağıdan sürüşdürmə xüsusi animasiyasını təyin edir. transitionDuration animasiya sürətini təyin edir. Kod həmçinin nəticənin ötürülməsini nümayiş etdirir: təfərrüat ekranı istifadəçi seçimi ilə Map qaytarır, çağıran ekran isə bu məlumatları push-dan Future vasitəsilə alır. Route tam izolyasiyanı təmin edir: təfərrüat ekranındakı qaralamalar siyahının vəziyyətinə təsir etmir.