How to show bottomnavigation bar in all pages in flutter

Question

I am creating an app which has bottomnavigation bar.In that bottomnavigation bar it has 5 items names namely profile,aboutus,home,notifications and cart. Each item names has its own page. Now question is i add a button in homepage and if i click on the button it goes to the new page but it doesn't show the bottomnavigation bar.How do i show the bottomnavigation bar in the new page and also the selected current index. Below is the dart code

Mainpage.dart

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final tabs = [
    Profile(),
    AboutUs(),
    Home(),
    Notifications(),
    CartPage(),
  ];

  @override
  void initState() {
    super.initState();
    _currentIndex = 2;
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<Cart>(
      builder: (context, cart, child) {
        return PlatformScaffold(
          body: tabs[_currentIndex],
          bottomNavBar: PlatformNavBar(
            android: (_) => MaterialNavBarData(
              type: BottomNavigationBarType.fixed,
            ),
            ios: (_) => CupertinoTabBarData(),
            currentIndex: _currentIndex,
            itemChanged: (index) => setState(
              () {
                _currentIndex = index;
              },
            ),
            items: [
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.person),
                  android: (_) => Icon(Icons.person),
                ),
                title: Text('Profile'),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.info),
                  android: (_) => Icon(Icons.info),
                ),
                title: Text('About Us'),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.home),
                  android: (_) => Icon(Icons.home),
                ),
                title: Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => new Image.asset(
                    "assets/notification.png",
                    height: 21.0,
                    color: Colors.grey[600],
                  ),
                  android: (_) => Icon(Icons.notifications),
                ),
                title: Text(
                  'Notifications',
                  style: TextStyle(fontSize: 12.0),
                ),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.shopping_cart),
                  android: (_) => Stack(
                    children: <Widget>[
                      Icon(Icons.shopping_cart),
                      cart.count == 0 ? new Container(height: 0, width: 0,)
                          : new Positioned(
                              right: 0,
                              child: new Container(
                                padding: EdgeInsets.all(1),
                                decoration: new BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.circular(6),
                                ),
                                constraints: BoxConstraints(
                                  minWidth: 12,
                                  minHeight: 12,
                                ),
                                child: new Text(
                                  '${cart.count}',
                                  style: new TextStyle(
                                    color: Colors.white,
                                    fontSize: 8,
                                  ),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            )
                    ],
                  ),
                ),
                title: Text('Cart'),
              ),
            ],
          ),
        );
      },
    );
  }
}

Homepage.dart

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: (){
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => NewPage()));
          },
          child: Text('New Page'),
        ),
      ),
    );
  }
}

Newpage.dart

class NewPage extends StatefulWidget {
  @override
  _NewPageState createState() => _NewPageState();
}

class _NewPageState extends State<NewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
      ),
    );
  }
}

Solution

I use this method to add a widget which is common to all pages:

MaterialApp(
  title: 'Flutter Demo',
  initialRoute:"/home",
  routes: [
   ...
  ],
  builder: (context, child) {
    return Stack(
      children: [
        child!,
        Overlay(
          initialEntries: [
            OverlayEntry(
              builder: (context) {
                return YourCustomWidget(); *//This widget now appears on all  pages*
              },
            ),
          ],
        ),
      ],
    );
  },
);

Comments

[mohammed nabil]

The problem is that when i click on the button in home page then i move to the new page or screen where i cannot see the bottomnavigation bar

[Haidar]

I don't get your point, I gave you a solution, wrap all your pages inside this pageview which can be controlled by user or programatically by you

[MwBakker]

he is talking about sub pages, these do not show the BottomNavigation bar