BottomNavigationBar with Navigator

I just want to know, can I make bottomnavigationbar reusable, because what i saw in the other similar problem is just they use list of screen and then using scaffold that it makes cannot be reusable for my cases, and I just want to know is this even possible?

import 'package:conditional/HistoryScreen.dart';
import 'package:conditional/HomeScreen.dart';
import 'package:flutter/material.dart';

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

  @override
  _NavBar createState() => _NavBar();
}


class _NavBar extends State<NavBar>{
  int currentIndex = 0;

  @override
  Widget build(BuildContext context){
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: (index){
        setState(() {
          currentIndex = index;
        });

        switch(index){
          case 0:
            Navigator.push(context, MaterialPageRoute(builder: (context) => HomeScreen()));
            break;

          case 1:
            Navigator.push(context, MaterialPageRoute(builder: (context) => HistoryScreen()), );
            break;
        }
      },
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          activeIcon: Icon(Icons.home, color: currentIndex == 0 ? Colors.red : Colors.grey),
          label: "Home"),

        BottomNavigationBarItem(
          icon:Icon(Icons.history),
          activeIcon: Icon(Icons.history, color: currentIndex == 1 ? Colors.red : Colors.grey),
          label: "History" )
      ],
      selectedItemColor: Colors.red,
    );
  }
}

import 'package:conditional/NavBar.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget{
  HomeScreen({Key? key}):super(key: key);

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Center(child: Text("This is Homescreen"),),
      bottomNavigationBar: NavBar(),
    );
  }
}

import 'package:conditional/NavBar.dart';
import 'package:flutter/material.dart';

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

  @override
  _HistoryScreen createState()=> _HistoryScreen();
}

class _HistoryScreen extends State<HistoryScreen>{

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Text("This is History Screen"),
      bottomNavigationBar: NavBar(),
    );
  }
}

the main problem is was, if I clicked the history button, the home button still red and I don't event know where's the problem, But the navigator is working correctly as intended just the Color when its clicked, can you guys help me?

To achieve what you want, you can use the IndexedStack widget.

Your code will look like this:

class AppIndex extends StatefulWidget {
  const AppIndex({super.key});

  @override
  State<AppIndex> createState() => _AppIndexState();
}

class _AppIndexState extends State<AppIndex> {
  //create a list of your pages
  List<Widget> pages = [
    HomeScreen(),
    HistoryScreen(),
  ];

  int currentIndex = 0;

  //create a function to increment tab
  void incrementTab(index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //use an index stacked widget
      body: IndexedStack(
        index: currentIndex,
        children: pages,
      ),
      // your bottomNavigationBar would look like this
      bottomNavigationBar: BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: incrementTab,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          activeIcon: Icon(Icons.home, color: currentIndex == 0 ? Colors.red : Colors.grey),
          label: "Home"),

        BottomNavigationBarItem(
          icon:Icon(Icons.history),
          activeIcon: Icon(Icons.history, color: currentIndex == 1 ? Colors.red : Colors.grey),
          label: "History" )
      ],
      selectedItemColor: Colors.red,
    )
    );
  }
}