Route — какво е, типове и създаване на маршрути в Flutter

Какво е Route в Flutter

Route — е основата на навигационната система на Flutter. Всеки екран, който потребителят вижда в приложението, е представен от обект Route, намиращ се в стека на Navigator. Route абстрахира екрана от управляващия код: Navigator добавя и премахва Route, а вътре в Route се намира интерфейсът, който потребителят вижда. Такава архитектура разделя отговорността между навигацията и показването.

За разлика от обикновената смяна на widgets, Route предоставя услуги, недостъпни за обикновените widgets: ModalBarrier (затъмняване на фона при отворен диалог), управление на анимация за влизане и излизане, обработка на хардуерния бутон „Назад“ на Android и интеграция с Hero анимация за плавни преходи между екрани.

Според Flutter Cookbook (2026), Route е ключов елемент за Hero анимация: Hero widget на един Route автоматично анимира прехода към Hero widget на следващия Route, създавайки ефект на „летящ“ елемент. Това е възможно именно защото Route запазва и двата екрана в Overlay по време на анимацията.

Route като градивен блок на навигацията

Route е основа както за прости мобилни приложения (чрез Navigator 1.0), така и за сложни сценарии с дълбоки връзки (Navigator 2.0). В Navigator 2.0 Route представлява Page, който RouterDelegate преобразува от конфигурацията на маршрута. Следователно, разбирането на Route е необходимо за работа с всяка навигационна система на Flutter — независимо от избрания подход или пакет.

Типове Route: MaterialPageRoute и CupertinoPageRoute

Flutter предоставя няколко вградени имплементации на Route, всяка от които адаптира поведението към конкретна платформа. Изборът на правилния тип Route влияе на потребителското изживяване: Material анимация на Android и Cupertino анимация на iOS създават усещане за „родно“ приложение.

MaterialPageRoute: стандарт за Android

MaterialPageRoute — най-често използваната имплементация на Route. Анимира влизането на нов екран отдолу нагоре с постепенно появяване. При излизане екранът се анимира отгоре надолу, връщайки се в начална позиция. Лентата с инструменти (AppBar) и тялото на екрана се анимират отделно, създавайки ефект на йерархия.

CupertinoPageRoute: стил на навигация iOS

CupertinoPageRoute имитира UINavigationController от iOS. Новият екран влиза отдясно, покривайки предишния. Ключова характеристика — поддръжка на интерактивен жест за плъзгане назад, имплементиран чрез CupertinoBackGestureDetector. Този жест се обработва дори по средата на анимацията, осигурявайки естествено поведение, познато на потребителите на iPhone.

Жизненият цикъл на Route: от създаване до унищожаване

Route има собствен жизнен цикъл, който се различава от жизнения цикъл на обикновен StatefulWidget. Разбирането на този цикъл е необходимо за правилно инициализиране на данни, абониране за потоци и освобождаване на ресурси при затваряне на екрана.

Етапи на жизнения цикъл на Route

Жизненият цикъл на Route се състои от четири основни етапа. Transition — Route се създава и анимира при влизане (извиква се didPush). Active — Route се показва напълно и взаимодейства с потребителя. Inactive — друг Route покрива текущия (диалог, долен екран), но Route остава в стека. Disposed — Route се премахва от стека и се унищожава, извикват се didPop и dispose.

Методите на жизнения цикъл на Route могат да бъдат презаписани в персонализирана имплементация. Например didPop се извиква, когато Route се премахва от стека — тук може да се запази чернова на данни. didChangeNext се извиква, когато следващият Route в стека се е променил — полезно за актуализиране на UI при промяна на навигационната история.

Според Flutter API Route.didPop (2026), важно е да не се бърка жизненият цикъл на Route с жизнения цикъл на State вътре в Route. StatefulWidget вътре в Route има собствени initState и dispose, които се извикват съответно в етапите Transition и Disposed. Route живее по-дълго от своя вътрешен State — Route остава в Overlay дори когато неговите widgets са временно скрити от друг Route.

Прехвърляне на данни чрез Route между екрани

Route предоставя механизми за прехвърляне на данни както при входа (при създаване), така и при изхода (при завършване). Правилното прехвърляне на данни чрез Route елиминира нуждата от глобални променливи и InheritedWidget, правейки навигацията типобезопасна и предвидима.

За прехвърляне на данни към нов екран се използва конструкторът на приемащия widget или аргументът arguments в Navigator.pushNamed. Вътре в Route данните са достъпни чрез RouteSettings.arguments, който се съхранява в обекта Route. Този подход работи за всички типове Route — MaterialPageRoute, CupertinoPageRoute и персонализирани имплементации.

За връщане на данни се използва вторият аргумент Navigator.pop(context, result). Navigator.push връща Future, който завършва със стойността, предадена в pop. Ако pop бъде извикан без аргумент, Future завършва с null. Този механизъм е аналог на startActivityForResult в Android и completion handler в iOS, но имплементиран чрез Dart Futures.

Пример за прехвърляне на данни чрез конструктора на Route

При директно извикване на Navigator.push с MaterialPageRoute данните се прехвърлят чрез конструктора на целевия екран. MethodChannel не се използва — това е чисто Dart взаимодействие. Този подход е за предпочитане за типобезопасно прехвърляне на сложни обекти.

Пример за създаване на персонализиран Route

Нека разгледаме пример за създаване на персонализиран Route със собствена анимация и прехвърляне на данни. PageRouteBuilder позволява дефиниране на анимация за влизане и излизане с пълен контрол над кривата на анимация и продължителността.

// Персонализиран 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),
));

// Върни данни от екрана
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Избери'),
);

// Получи резултат на извикващия екран
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Избрано: ${result['selected']}');
}

В примера PageRouteBuilder дефинира персонализирана анимация на плъзгане отдолу с прозрачност. transitionDuration задава скоростта на анимацията. Кодът също демонстрира предаване на резултат: екранът за детайли връща Map с избора на потребителя, а извикващият екран получава тези данни чрез Future от push. Route осигурява пълна изолация: черновите на екрана за детайли не влияят на състоянието на списъка.