Jadon Steinmetz
Jadon Steinmetz

Reputation: 99

How to think about imperative nested navigation in flutter

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

Answers (0)

Related Questions