Reputation: 99
As I've been reading through the flutter documentation, I've noticed this warning spread throughout multiple pages of documentation for Navigation
Note: We don't recommend using named routes for most applications. For more information, see the Limitations section below.
Which makes sense to me, however I have yet to find any existing documentation / cookbooks that use this updated design to show how to support nested navigation without named routes. I have my app set up with a NavigationBar that calls the home page of where it's navigated to, and then that home page manages it's own navigation.
Here's an idea of what I want to accomplish:
Scaffold(
bottomNavigationBar: NavigationBar(
destinations: const <Widget> [
NavigationDestination(
selectedIcon: Icon(Icons.home),
icon: Icon(Icons.home_outlined),
label: 'Home',
)
]
body: const <Widget> [Home()]
)
....
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Navigator(...)
}
}
...
// Some widget under "Home" with a child that has a button:
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const RequestDashboard())
),
With the idea being, navigation would be containerized to whatever area it is located. However, I'm having trouble figuring out how to setup a nested navigation without using named routes. Or, if I'm even thinking about it in a way that best utilizes how Flutter works. If this can be cleanly implemented without named routes / declarative routing, I would prefer that. If not, I'm open to whatever will work :)
As a side note - One area in particular I've struggled with Navigator is getting the back button to work consistently within nested navigation. This is likely just a me issue being new to Flutter, though! Below is an example I've tried:
Navigator(
pages: const [
MaterialPage(
key: ValueKey('Home'),
child: Home(),
),
],
onPopPage: (route, result) {
if (!route.didPop(result)) {
return false;
}
return true;
},
);
Upvotes: 0
Views: 22