Navigator: управление на екрани във Flutter

Какво е Navigator във Flutter

Navigator — е widget, който управлява стека от Route обекти и реализира екранна навигация във Flutter приложение. Всяко извикване на push поставя нов Route на върха на стека, pop премахва горния Route и се връща към предишния екран. MaterialApp автоматично създава Navigator за цялото приложение, правейки го достъпен чрез Navigator.of(context).

За разлика от StatefulWidget, където замяната на съдържание става чрез setState в рамките на един widget, Navigator работи с цели екрани със собствен жизнен цикъл. Всеки Route в стека е изолирано състояние със собствен BuildContext, което предотвратява изтичане на памет и опростява управлението на зависимости. При извикване на pop, неизползваният Route се унищожава, освобождавайки ресурси.

Според Flutter Navigation Guide (2026), Navigator е еволюирал от императивно API (Navigator 1.0) до декларативно (Navigator 2.0). Navigator 1.0 използва директно методите push/pop, което е удобно за прости сценарии. Navigator 2.0 (Router) е подходящ за приложения с дълбоки връзки, адаптивна навигация и уеб маршрутизация.

Как работи Navigator под капака

Вътрешно Navigator използва Overlay — специален widget, който показва Route един върху друг. Всеки Route създава своя позиция в Overlay с Z-индекс, съответстващ на дълбочината в стека. Това обяснява защо при push новият екран се анимира над предишния, а при pop — предишният екран е вече готов за показване: не е унищожен, а е останал в Overlay под новия.

За анимации на преходи Navigator използва PageTransitionsTheme, който може да бъде предефиниран в ThemeData. Платформените анимации се задават чрез CupertinoPageRoute за iOS (плъзгане отдясно) и MaterialPageRoute за Android (плъзгане отдолу). Navigator автоматично избира правилната анимация при използване на PlatformRoute.

Методи на Navigator: push, pop и pushReplacement

Navigator предоставя набор от методи за управление на Route стека. Всеки метод решава конкретна навигационна задача — от прост преход до пълна замяна на историята на екрани. Нека разгледаме основните методи с примери за използване.

Push и Pop: основни операции

Методът push приема Route и връща Future с резултата, предаден при pop. Това позволява получаване на данни от екрана, към който сме навигирали. Например екран за избор на дата може да върне DateTime чрез Navigator.pop(context, selectedDate). Методът pop без аргумент връща null, с аргумент — предава стойността на извикващия екран.

PushReplacement: замяна на екран

pushReplacement заменя текущия Route с нов, премахвайки текущия от стека. Това е критично в сценарии, където потребителят не трябва да се връща към предишния екран. Типичен пример — екран за вход: след успешно влизане текущият екран се заменя с главния и бутонът „Назад" не се връща към формата за вход.

Именувани маршрути и onGenerateRoute

Navigator поддържа навигация по именувани маршрути чрез метода pushNamed. Вместо директно създаване на Route, разработчикът задава текстов идентификатор и Navigator автоматично създава Route въз основа на конфигурацията в MaterialApp. Това опростява кода и централизира дефиницията на маршрути на едно място.

Именуваните маршрути се дефинират чрез свойството routes в MaterialApp, където всеки ключ е низ за път, а стойността е функция, връщаща Widget. За динамични маршрути (с параметри) се използва onGenerateRoute — обратно извикване, което получава RouteSettings и връща Route. Това позволява предаване на аргументи чрез arguments и реализиране на дълбока навигация.

Според Flutter Cookbook (2026), предаването на аргументи чрез pushNamed се осъществява с параметъра arguments: Object?. Приемащият екран извлича аргументите чрез ModalRoute.of(context)!.settings.arguments, което осигурява типобезопасно предаване на данни без глобални променливи или InheritedWidget.

Обработка на неизвестни маршрути

Свойството onUnknownRoute в MaterialApp обработва случаи, когато pushNamed се извиква с несъществуващ маршрут. Това е полезно за показване на екран 404 или пренасочване към главната страница. В комбинация с onGenerateRoute осигурява пълно покритие на всички възможни навигационни сценарии.

Navigator 2.0 и декларативна навигация Router

Navigator 2.0 (известен също като Router API) — е декларативен подход към навигацията, въведен във Flutter 2.0. За разлика от императивния Navigator 1.0, където разработчикът извиква push/pop, Router управлява навигацията чрез състояние, автоматично синхронизирайки URL на браузъра с текущия екран. Това е особено важно за уеб приложения и десктоп версии.

Архитектурата на Navigator 2.0 се състои от три ключови компонента: RouteInformationParser анализира URL в конфигурация на маршрут, RouterDelegate преобразува конфигурацията в списък от Route, а BackButtonDispatcher обработва системния бутон „Назад". Такава архитектура прави навигацията напълно предвидима и тестваема.

За опростяване на работата с Navigator 2.0 съществуват пакети-обвивки: go_router (препоръчан от Google), auto_route и beamer. go_router предоставя декларативно DSL за дефиниране на маршрути с поддръжка на вложена навигация, пренасочвания и дълбоки връзки без ръчно имплементиране на RouterDelegate. Според pub.dev (2026), go_router се използва в 35% от новите Flutter проекти, които предпочитат декларативния подход.

Пример за навигация във Flutter приложение

Нека разгледаме пример за Navigator с именувани маршрути и предаване на данни между екрани. Кодът демонстрира екран със списък на продукти, преход към детайлния екран и връщане с резултат.

// Конфигурация на маршрути в MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Навигация с предаване на данни
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Получаване на данни на приемащия екран
final args = ModalRoute.of(context)!.settings.arguments as String;

// Замени екран след влизане
Navigator.pushReplacementNamed(context, '/home');

// Изчисти стека до главния екран
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

В примера Navigator.pushNamed предава идентификатора на продукта на детайлния екран. При връщане чрез Navigator.pop(context, updatedProduct) извикващият екран получава актуализираните данни в променливата result. pushReplacementNamed заменя текущия екран след оторизация, а pushNamedAndRemoveUntil с условие (route) => false напълно изчиства стека, предотвратявайки връщане към предишните екрани.