Можете объяснить концепцию и основные особенности Navigatior 2.0?
Ответ от нейросети
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.
- Часто используется через обёртки и пакеты, чтобы не писать всю навигацию вручную.