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 позволяет определить анимацию входа и выхода с полным контролем над кривой анимации и длительностью.

// Custom Route with slide animation
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),
));

// Return data from screen
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Select'),
);

// Get result on calling screen
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Selected: ${result['selected']}');
}

В примере PageRouteBuilder определяет кастомную анимацию слайда снизу с прозрачностью. transitionDuration задаёт скорость анимации. Код также демонстрирует передачу результата: детальный экран возвращает Map с выбором пользователя, а вызывающий экран получает эти данные через Future от push. Route обеспечивает полную изоляцию: черновики на детальном экране не влияют на состояние списка.