how to make bottomNav appears on screens that are not defined in it? (Flutter)

Question

I've created a BottomNav that has 4 buttons and it navigates fine between them. But i want this BottomNav to be visible in all screens of the app (those screens that are not directly attached to the BottomNav).

for example: my bottomNav has 4 screens (home, profile, notices, and more), the bottomNav appears perfectly in them, but i want it to appear also in another 2 screens (permissions, vacations) which are accessed from button in Home screen

How can I approach such a thing?

here's my BottomNav code to be clear:

int _selectedIndex = 0; 
//list of widgets that already exist on the bottomNav
  static List<Widget> _screens = <Widget>[
    PermissionsRequestScreen(),
    HomeScreen(title: 'Home'),
    NoticesScreen(),
    ProfileScreen(),
    MoreScreen(),
  ];
////////////////////////
// bottom nav bar navigator function
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
/////////////////////
@override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(),
      body: Center(
        child: _screens.elementAt(_selectedIndex),
      ),

      //bottomNavBar
      bottomNavigationBar: createBottomNavBar(),

    );
  }

///////////////////

// bottom navigation Bar
  Widget createBottomNavBar() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [primaryColor, secondaryColor],
          stops: [8, 8],
        ),
      ),
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        backgroundColor: Colors.transparent,
        iconSize: 22,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white24,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info),
            label: 'Notices',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.more_horiz),
            label: 'More',
          ),
        ],
        enableFeedback: true,
      ),
    );
  }

I've tried to use pushReplacement when moving from the bottomNav screen to the next one but it doesn't work.

So, i.e.: How to keep the BottomNav visible in the screens that aren't directly attached to the BottomNav??

score 1 · Answer 1 · answered Jun 11 '22 at 11:51

You can use PageView to achieve your goal.

Example PageView:

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

  final pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: PageView(
          controller: pageController,
          physics: const NeverScrollableScrollPhysics(),
          onPageChanged: (_){},
          children: const <Widget>[
            FirstView(),
            SecondView(),
            ThirdView(),
            FourthView(),
          ],
        ),
      ),
      bottomNavigationBar: const NavigationBarView(),
    );
  }
}

You need to create PageController to change the page on the screen when an item from BottomNavigation is selected.

If you have further questions, please don't hesitate to write in the comments.

thank you so much, this is a good approach. – Roaa Koraiem Jun 12 '22 at 14:31 — Roaa Koraiem, Jun 12 '22 at 14:31

score 1 · Accepted Answer · answered Jun 11 '22 at 16:12

You can try persistent_bottom_nav_bar package. It is easy to use and also has 20 different style.

If you want to have your own style for the navigation bar, follow these steps

Here is an example of implementation;

class _PersistentNavBarState extends State<PersistentNavBar> {
  late PersistentTabController _controller;

  @override
  void initState() {
    _controller = PersistentTabController(initialIndex: 0);
    super.initState();
  }

  List<Widget> _buildScreens() {
    return [
      HomeScreen(title: 'Home'),
      NoticesScreen(),
      ProfileScreen(),
      MoreScreen(),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: ('Home'),
        activeColorPrimary: CupertinoColors.activeBlue,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.info),
        title: ('Notices'),
        activeColorPrimary: CupertinoColors.activeBlue,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.person),
        title: ('Profile'),
        activeColorPrimary: CupertinoColors.activeBlue,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.more_horiz),
        title: ('More'),
        activeColorPrimary: CupertinoColors.activeBlue,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
    ];
  }

  @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
          .neumorphic, // Choose the nav bar style with this property.
    );
  }
}

1

Happy to hear it was helpful – Zahra Jun 12 '22 at 15:00

how to make bottomNav appears on screens that are not defined in it? (Flutter)

2 Answers2