How to create Different BottomNavigationBar for each stepper in flutter?-CodePudding

I want create different bottom app bar for different steps. I am not able to create bottomNavigationBar in stepper class. How can I achieve this, please help me.

CodePudding user response：

Define a value for tracking which page/step point is loaded

int activeStep = 0;

You can define a bottom navigation bar inside scaffold and this bar depends on a value which it is changed according to active stepper index.

  Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: activeStep,
      selectedItemColor: Colors.black,
      items: const [
        BottomNavigationBarItem(
            label: "Home", icon: Icon(Icons.home, color: Colors.black)),
        BottomNavigationBarItem(
            label: "Search", icon: Icon(Icons.search, color: Colors.black)),
        BottomNavigationBarItem(
            label: "Favourites",
            icon: Icon(Icons.favorite, color: Colors.black)),
        BottomNavigationBarItem(
            label: "Profile",
            icon: Icon(Icons.person, color: Colors.black)),
      ],
    ),
    body: Padding(
      padding: const EdgeInsets.all(8.0),
      child: IconStepper(
        icons: const [
          Icon(Icons.home),
          Icon(Icons.search),
          Icon(Icons.favorite),
          Icon(Icons.person),
        ],
        activeStep: activeStep,
        onStepReached: (index) {
          setState(() {
            activeStep = index;
          });
        },
      ),
    ));