Bottom navigation bar for all screens in flutter-CodePudding

In my app, I have more than 10 screens. I use bottom navigation bar for mostly used screens. I have 4 bottom navigation item. My question is that how to put same bottom navigation bar in rest of screen. I want all of my screen with same bottom navigation bar.

Regards, Alex

CodePudding user response：

You could use nested Navigator. Lets imagine that your navigation bar have 2 pages (page A and page B). From page A you want to navigate to pages C, D, E... and have there navigation bar. In this case you need to use nested Navigator in widget A. I think its also good to use AutomaticKeepAliveClientMixin in your widget which wrap your nested Navigator and override "wantKeepAlive"

@override
  bool get wantKeepAlive => true;

CodePudding user response：

sounds like you need this, persistent_bottom_nav_bar:

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(),
        confineInSafeArea: true,
        backgroundColor: Colors.white, // Default is Colors.white.
        handleAndroidBackButtonPress: true, // Default is true.
        resizeToAvoidBottomInset: true, // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
        stateManagement: true, // Default is true.
        hideNavigationBarWhenKeyboardShows: true, // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
        decoration: NavBarDecoration(
          borderRadius: BorderRadius.circular(10.0),
          colorBehindNavBar: Colors.white,
        ),
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: ItemAnimationProperties( // Navigation Bar's items animation properties.
          duration: Duration(milliseconds: 200),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation( // Screen transition animation on change of selected tab.
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle: NavBarStyle.style1, // Choose the nav bar style with this property.
    );
  }
}