Nested navigators

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// MyApp is the root widget of the application.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Root(),
    );
  }
}

// Root is a StatefulWidget that manages the bottom navigation and the navigators for each tab.
class Root extends StatefulWidget {
  @override
  State<Root> createState() => _RootState();
}

class _RootState extends State<Root> {
  int _selectedIndex = 0; // Index of the currently selected tab.
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    // Add more keys for additional tabs.
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Stack to hold each navigator. Only the selected navigator is visible.
      body: Stack(
        children: List.generate(_navigatorKeys.length, (index) {
          return Offstage(
            offstage: _selectedIndex != index,
            child: Navigator(
              key: _navigatorKeys[index],
              onGenerateRoute: (RouteSettings settings) {
                return MaterialPageRoute(
                  builder: (context) {
                    if (index == 0) {
                      // The first tab's navigator leads to the HomePage.
                      return Home(destinationIndex: index);
                    } else {
                      // Other tabs lead to placeholder pages.
                      return Center(
                        child: Text('Page $index'),
                      );
                    }
                  },
                );
              },
            ),
          );
        }),
      ),
      // Bottom navigation bar to switch between tabs.
      bottomNavigationBar: NavigationBar(
        selectedIndex: _selectedIndex,
        onDestinationSelected: (int index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          // Add more destinations for additional tabs.
        ],
      ),
    );
  }
}

// Home is the main page for the first tab.
class Home extends StatelessWidget {
  final int destinationIndex;

  const Home({Key? key, required this.destinationIndex}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        // Button to navigate to the ListPage.
        child: ElevatedButton(
          child: Text('Go to List Page'),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => ListPage(),
            ));
          },
        ),
      ),
    );
  }
}

// ListPage is a simple page that is pushed onto the navigation stack of the first tab.
class ListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('List Page')),
      body: Center(
        child: Text('Welcome to List Page'),
      ),
    );
  }
}