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 забезпечує повну ізоляцію: чернетки на детальному екрані не впливають на стан списку.