Summary :

We need to implement two bottom navigation bars in our app. One is main navigation of the app and the second is feature-specific. When I click on a specific tab, it triggers a new screen with having nav bar consist three tabs. To implement, I typically pass a list of class references that correspond to the number of available tabs in the navigation class. Each of these classes is responsible for rendering the specific view associated with its respective tab.

Issue: In the gif, we can see after tapping the Task tab it opens a screen from the left and overrides the existing bottom navigation bar with a new one. On the code level I have taken five classes in one of the classes, I added one more bottom navigation bar but when I try to implement it it shows the navigation bar on top of the older one it does not overlap.

Adding code snippet that I tried implementing:

   enum _Tab { TAB1, TAB2, TAB3, TAB4,TAB5 }

   _children = <Widget>[

      ChangeNotifierProvider<TabOne>(
          create: (_) => TabOneProvider(),
          child:  TabOne()),
      ChangeNotifierProvider<Task>(
          create: (_) => TaskProvider(),
          child:   Task()),
      ChangeNotifierProvider<TabTwo>(
          create: (_) => TabTwoProvider(),
          child: const TabTwo()),
        ChangeNotifierProvider<TabThree>(
          create: (_) => TabThreeProvider(),
          child: const TabThree()),
          ChangeNotifierProvider<TabFour>(
          create: (_) => TabFourProvider(),
          child: const TabFour()),

    ];

  class User extends StatefulWidget {
    const User();

    @override
    State<User> createState() => _UserState();
    }

 class _UserState extends State<User> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        body: _children[_currentIndex!], ,
    );
   }
 }

I am seeking suggestions on this matter. Thank you in advance for your assistance.