How to make a Bottom Navigation bar, with nested navigation, and Scaffold for each page?

Question

I have a BottomNavigation bar, and I have Nested navigation for it, but I also need a Scaffold for every new page in the Top level screen. I get that nested Scaffold is not recommended and I also have a resizeToAvoidBottomInset problem when I use nested Scaffolds.

My Tab navigator:

 @override
  Widget build(BuildContext context) {
    Widget child;
    if (tabItem == "Home") {
      child = const Home();
    } else if (tabItem == 'screen2') {
      child = Screen2();
    } else if (tabItem == 'screen3') {
      child = const Screen3();
    } else if (tabItem == 'screen4') {
      child = const Screen4(0);
    } else if (tabItem == 'Screen5') {
       child= Screen5();
    } else {
      child = const Home();
    }

    return Navigator(
      key: navigatorKey,
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(builder: (context) => child);
      },
    );
  }

• I dont want to use Cupertino or custom Navigation bars, I want to do it with Material.dart only
• I have tried To add a MaterialApp within the Top Level material app, which works, but there has to be a better way

Answer 1

This is my code for doing this

class CustomerHomeScreen extends StatefulWidget {
  const CustomerHomeScreen({Key? key}) : super(key: key);

  @override
  State<CustomerHomeScreen> createState() => _CustomerHomeScreenState();
}

class _CustomerHomeScreenState extends State<CustomerHomeScreen> {
  int _selectedIndex=0;
  final List _tabs=[
    const HomeScreen(), //You can create all these classes with Statefull widgets
    const Screen1(),
    const Screen2(),
    const Screen3(),
    const Screen4(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _tabs[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.black,
          unselectedItemColor: Colors.red,
          currentIndex: _selectedIndex,
          // type: BottomNavigationBarType.fixed,
          selectedLabelStyle: const TextStyle(fontWeight: FontWeight.w600),
          items: [
        const BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        const BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Screen1'),
        const BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Screen2'),
        BottomNavigationBarItem(icon: Icon(Icons.shopping_cart)), label: 'Screen3'),
        const BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Screen4,'),
      ],
        onTap: (index){
          setState(() {
            _selectedIndex=index;
          });
        }
      ),
    );
  }
}