Route — шта је то, врсте и креирање рута у Flutter-у

Шта је Route у Flutter-у

Route — је основа навигационог система Flutter-а. Сваки екран који корисник види у апликацији представљен је објектом Route који се налази у стек-у Navigator-а. Route апстрахује екран од управљачког кода: Navigator додаје и уклања Route, а унутар Route-а се налази интерфејс који корисник види. Ова архитектура раздваја одговорност између навигације и приказа.

За разлику од једноставне замене виџета, Route пружа услуге недоступне обичним виџетима: ModalBarrier (затамњење позадине при отварању дијалога), управљање анимацијом уласка и изласка, обрада хардверског дугмета „Назад“ на Android-у и интеграција са Hero анимацијом за глатке прелазе између екрана.

Према Flutter Cookbook (2026), Route је кључни елемент за Hero анимацију: Hero виџет на једном Route-у аутоматски анимира прелаз ка Hero виџету на следећем 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-у чак и када су његови виџети привремено скривени другим Route-ом.

Пренос података преко Route између екрана

Route пружа механизме за пренос података како на улазу (при креирању), тако и на излазу (при завршетку). Исправан пренос података преко Route-а елиминише потребу за глобалним променљивим и InheritedWidget-ом, чинећи навигацију типски безбедном и предвидљивом.

За пренос података на нови екран користи се конструктор примајућег виџета или аргумент 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 обезбеђује потпуну изолацију: верзије на екрану детаља не утичу на стање листе.