GoRouter: How to navigate to a StatefulShellBranch from outside the StatefulShellRoute while preserving its state and navigation stack?

Question

I'm running into an issue using GoRouter where I'm trying to navigate the bottom navbar tabs programmatically if coming from a page that is outside the stateful shell route.

For example if you observe this route hierarchy:

GoRouter
├─ GoRoute('/about')
└─ StatefulShellRoute
    ├─ StatefulShellBranch
    │   └─ GoRoute('/a')
    └─ StatefulShellBranch
        └─ GoRoute('/b')

The navigation flow is you go from B Tab -> About Page -> A Tab, but when you pop from the About Page it shows the B Tab and when you use context.go(A Tab), the A Tab resets its current navigation stack.

So how would you navigate to the A Tab while also preserving its current state and navigation stack?

Answer 1

I think your issue is related to BottomNavigationBar and the state for each tab. Did you use IndexedStack in the body? here is an exemple

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar with IndexedStack'),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          FirstTab(),
          SecondTab(),
          ThirdTab(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.star),
            label: 'Favorites',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

With IndexedStack, when you will tap on a tab, _currentIndex will be updated and IndexedStack knows which widget is at the top of the stack and saves the state of the previous one. So navigation between screens should be saved per tabs