В чем разница между Navigator 1.0 и 2.0?

Разница между Navigator 1.0 и 2.0 в Flutter

Navigator 2.0 — это переписанный API навигации, который решает ограничения Navigator 1.0 и предоставляет более гибкий и предсказуемый способ управления маршрутизацией в Flutter приложениях.

Navigator 1.0 — Imperative (Императивный подход)

Navigator 1.0 работает через методы, которые напрямую изменяют стек экранов.

// Отправить новый экран
Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => DetailScreen()),
);

// Вернуться на предыдущий экран
Navigator.of(context).pop();

// Заменить текущий экран
Navigator.of(context).pushReplacementNamed('/home');

// Очистить весь стек и перейти на новый экран
Navigator.of(context).pushNamedAndRemoveUntil(
  '/home',
  (route) => false,
);

Ограничения Navigator 1.0

1. Нет синхронизации с URL — приложение не поддерживает глубокие ссылки (deep links) по умолчанию
2. Сложно управлять состоянием — навигация и состояние приложения не связаны
3. Проблемы с back-кнопкой — сложно контролировать поведение при нажатии кнопки Back
4. Нет истории приложения — невозможно синхронизировать навигацию с браузерной историей (для Web)
5. Скрыты детали реализации — трудно отследить состояние стека маршрутов

Navigator 2.0 — Declarative (Декларативный подход)

Navigator 2.0 использует декларативный подход, основанный на состоянии. Навигация описывается в build() методе на основе текущего состояния приложения.

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Route> routes = [HomeRoute()];
  
  void _handleRoute(String? path) {
    if (path == '/details') {
      setState(() {
        routes = [HomeRoute(), DetailsRoute()];
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Navigator(
        pages: [
          for (final route in routes)
            route.page,
        ],
        onPopPage: (route, result) {
          if (!route.didPop(result)) return false;
          setState(() => routes.removeLast());
          return true;
        },
      ),
    );
  }
}

Основные различия

Пример: Переход с 1.0 на 2.0

Navigator 1.0:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (_) => DetailScreen()),
            );
          },
          child: Text("Go to Details"),
        ),
      ),
    );
  }
}

Navigator 2.0:

class AppState extends ChangeNotifier {
  List<AppPage> pages = [HomePage()];
  
  void goToDetail(int id) {
    pages = [HomePage(), DetailPage(id: id)];
    notifyListeners();
  }
  
  void goBack() {
    if (pages.length > 1) {
      pages.removeLast();
      notifyListeners();
    }
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AppRouterDelegate(),
      routeInformationParser: AppRouteInformationParser(),
    );
  }
}

Преимущества Navigator 2.0

✅ Синхронизация с URL — поддержка глубоких ссылок и браузерной истории ✅ Предсказуемость — навигация явно описана в build() методе ✅ Управление состоянием — полная интеграция с состоянием приложения ✅ Контроль back-кнопки — точное управление поведением ✅ Web-поддержка — отличная работа на веб-платформе ✅ Тестируемость — легче писать тесты благодаря явному состоянию

Современные решения

Сегодня многие разработчики используют популярные пакеты, которые упрощают работу с Navigator 2.0:

• go_router — самый популярный, декларативный роутер
• auto_route — генерирует код маршрутизации
• beamer — ещё один вариант с поддержкой deep links

// Пример с go_router
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/home',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) => DetailScreen(
        id: state.params['id']!,
      ),
    ),
  ],
);

void main() {
  runApp(MyApp(router: router));
}

Заключение

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