英文:
Using go_router package in a flutter app with a statefulShellRoute, how to navigate to routes outside of the shell?
问题
我已经为底部导航栏在Flutter应用中实现了go_router
的statefulShellRoute
以实现嵌套路由。
但是,我还有一些页面希望在statefulShellRoute
之外(底部导航栏之外)。我在GoRouter
中定义了这些路由,但当我使用context.push()
导航到它们时,如预期的那样,我仍然可以看到底部导航栏,因为它将新屏幕推送到嵌套导航堆栈上。
如果我使用context.go()
,虽然我可以到达页面并使底部导航栏消失,但现在无法返回,因为先前的路由被替换了。
如何在底部导航栏之外推送一个路由,并仍然具有返回的能力?
英文:
I have implemented go_router statefulShellRoute for bottomNavigationBar to have nested routes in a flutter app.
But I also have pages I want to be outside of the statefulShellRoute (outside bottom nav bar), i have these routes defined in GoRouter outside of the shell routes list but when I navigate to them using context.push(), as expected I can still see the Bottom Navigation Bar since it pushes the new screen onto the nested navigation stack.
If I use context.go(), even though I can reach the page and make the bottom nav bar disappear, I can't go back now since the previous route was replaced.
How can I push a route outside of the bottom navigation bar shell and still have the ability to come back?
答案1
得分: 5
以下是翻译好的部分:
"Was searching for the same question before. Here is the answer for future searchers: you need to assign parentNavigatorKey
for your route to be pushed over shell route. Example from go_router repo (pay attention to _rootNavigatorKey
):
final GoRouter _router = GoRouter(
navigatorKey: _rootNavigatorKey,
initialLocation: '/a',
debugLogDiagnostics: true,
routes:
/// Application shell
ShellRoute(
navigatorKey: _shellNavigatorKey,
builder: (BuildContext context, GoRouterState state, Widget child) {
return ScaffoldWithNavBar(child: child);
},
routes:
/// The first screen to display in the bottom navigation bar.
GoRoute(
path: '/a',
builder: (BuildContext context, GoRouterState state) {
return const ScreenA();
},
routes:
// The details screen to display stacked on the inner Navigator.
// This will cover screen A but not the application shell.
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(label: 'A');
},
),
],
),
/// Displayed when the second item in the the bottom navigation bar is
/// selected.
GoRoute(
path: '/b',
builder: (BuildContext context, GoRouterState state) {
return const ScreenB();
},
routes:
/// Same as "/a/details", but displayed on the root Navigator by
/// specifying [parentNavigatorKey]. This will cover both screen B
/// and the application shell.
GoRoute(
path: 'details',
parentNavigatorKey: _rootNavigatorKey,
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(label: 'B');
},
),
],
),
英文:
Was searching for the same question before. Here is the answer for future searchers: you need to assign parentNavigatorKey
for your route to be pushed over shell route. Example from go_router repo (pay attention to _rootNavigatorKey
):
final GoRouter _router = GoRouter(
navigatorKey: _rootNavigatorKey,
initialLocation: '/a',
debugLogDiagnostics: true,
routes: <RouteBase>[
/// Application shell
ShellRoute(
navigatorKey: _shellNavigatorKey,
builder: (BuildContext context, GoRouterState state, Widget child) {
return ScaffoldWithNavBar(child: child);
},
routes: <RouteBase>[
/// The first screen to display in the bottom navigation bar.
GoRoute(
path: '/a',
builder: (BuildContext context, GoRouterState state) {
return const ScreenA();
},
routes: <RouteBase>[
// The details screen to display stacked on the inner Navigator.
// This will cover screen A but not the application shell.
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(label: 'A');
},
),
],
),
/// Displayed when the second item in the the bottom navigation bar is
/// selected.
GoRoute(
path: '/b',
builder: (BuildContext context, GoRouterState state) {
return const ScreenB();
},
routes: <RouteBase>[
/// Same as "/a/details", but displayed on the root Navigator by
/// specifying [parentNavigatorKey]. This will cover both screen B
/// and the application shell.
GoRoute(
path: 'details',
parentNavigatorKey: _rootNavigatorKey,
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(label: 'B');
},
),
],
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论