I’m implementing navigation within a BottomSheet using ModalBottomSheetRoute and go_router. However, I am unable to navigate to different paths within the BottomSheet. I have searched through various StackOverflow posts and issues, but I haven’t found any cases similar to mine.
I want to set a shellRoute with a common ModalBottomSheetRoute and have the nested goRoutes navigate within that ModalBottomSheetRoute. However, in this situation, it does not show any errors.
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
final GlobalKey<NavigatorState> settingsNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: 'settings');
final GoRouter _router = GoRouter(
initialLocation: '/',
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (context, state) => const MyHomePage(),
),
ShellRoute(
navigatorKey: settingsNavigatorKey,
pageBuilder: (context, state, widget) {
return BottomSheetPage(
key: state.pageKey,
showDragHandle: true,
child: widget,
);
},
// builder: (context, state, widget) {
// return Scaffold(appBar: AppBar(), body: Center(child: widget));
// },
routes: [
GoRoute(
parentNavigatorKey: settingsNavigatorKey,
path: '/test1',
builder: (context, state) => Scaffold(
appBar: AppBar(title: Text('This is test1 Page'),),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {
GoRouter.of(context).push('/test1/test2');
},
child: Text('go to test2')),
Text('test1'),
],
),
),
routes: [
GoRoute(
parentNavigatorKey: settingsNavigatorKey,
path: 'test2',
builder: (context, state) => Scaffold(
appBar: AppBar(),
body: Center(child: Text('test2')),
),
),
],
),
],
),
],
);
class BottomSheetPage<T> extends Page<T> {
final Widget child;
final bool showDragHandle;
final bool useSafeArea;
const BottomSheetPage({
required this.child,
this.showDragHandle = false,
this.useSafeArea = true,
super.key,
});
@override
Route<T> createRoute(BuildContext context) => ModalBottomSheetRoute<T>(
settings: this,
isScrollControlled: true,
showDragHandle: showDragHandle,
useSafeArea: useSafeArea,
backgroundColor: Colors.transparent,
builder: (context) => child,
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Nested Navigation BottomSheet'),
),
body: Center(
child: TextButton(
child: Text("Push the test1"),
onPressed: () {
GoRouter.of(context).push('/test1');
},
)),
);
}
}
problem video
Navigation works within the BottomSheet
antbear is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.