Sobes.tech
Назад к вопросам
Junior — Middle
71

Можете объяснить концепцию и основные особенности Navigatior 2.0?

Компании, где спрашивали
HamkorBank

Ответ от нейросети

sobes.tech AI

Что хотят услышать интервьюеры:

Navigator 2.0 — это декларативный подход к навигации во Flutter, где состояние экрана описывается через текущее состояние приложения, а не через последовательные push/pop. Он нужен для гибкой навигации, deep links и синхронизации URL с UI. Важно понимать, что это более сложная, но более контролируемая модель по сравнению с Navigator 1.0.

Определение:

Navigator 2.0 — это API навигации во Flutter, в котором маршрут строится на основе текущего состояния приложения и списка страниц, а не только через императивные вызовы. Основная идея в том, что UI и навигация становятся частью одного состояния: если состояние меняется, обновляется и стек страниц. Такой подход особенно удобен для web, deep linking и сценариев с вложенной или условной навигацией.

Пример использования:

Например, в приложении интернет-магазина можно показать список товаров, а при выборе товара — перейти на страницу деталей. Если пользователь открыл URL сразу на страницу товара, приложение должно восстановить нужный экран. Navigator 2.0 позволяет описать это через текущее состояние, а не вручную строить стек после запуска.

class AppState extends ChangeNotifier {
  bool showDetails = false;

  void openDetails() {
    showDetails = true;
    notifyListeners();
  }

  void closeDetails() {
    showDetails = false;
    notifyListeners();
  }
}

class MyRouterDelegate extends RouterDelegate<AppState>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppState> {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  final AppState state;

  MyRouterDelegate(this.state) {
    state.addListener(notifyListeners);
  }

  @override
  AppState? get currentConfiguration => state;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        const MaterialPage(child: ProductListPage()),
        if (state.showDetails)
          const MaterialPage(child: ProductDetailsPage()),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        state.closeDetails();
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(AppState configuration) async {}
}

Пояснение кода:

В этом примере код показывает, как навигация зависит от состояния AppState.
Сначала отображается ProductListPage. Если showDetails == true, в стек добавляется ProductDetailsPage.
Когда пользователь открывает детали, вызывается openDetails(), состояние меняется, и Flutter перестраивает Navigator с новым списком pages.
При нажатии назад срабатывает onPopPage, где состояние синхронизируется обратно через closeDetails().

Ключевые моменты:

  • Navigator 2.0 — декларативный: стек страниц описывается через состояние.
  • Хорошо подходит для deep links, web-навигации и восстановления состояния.
  • Работает через Router, RouterDelegate, RouteInformationParser.
  • Позволяет гибко управлять стеком страниц как частью бизнес-логики.
  • Сложнее в реализации, чем Navigator 1.0, поэтому для простых экранов часто достаточно старого API.
  • Часто используется через обёртки и пакеты, чтобы не писать всю навигацию вручную.