Bottom Navigation Not Persisting On Some Pages

Question

I have been trying to make the bottom navigation bar persisting on all page screens but it looks like it is only persisting for the pages that are on the bottom navigation only i.e HomeScreen(), DiscoverScreen(), GivingScreen(), EventsScreen() and SettingsScreen(). Other pages are not getting the bottom navigation. Here is the code of my bottom navigation bar. How can I add the bottom nav bar on all pages I have in the app?

class CustomBottomNavBar extends StatefulWidget {
  const CustomBottomNavBar({Key key}) : super(key: key);

  @override
  _CustomBottomNavBarState createState() => _CustomBottomNavBarState();
}

class _CustomBottomNavBarState extends State<CustomBottomNavBar> {
  int currentIndex = 0;

  final screens = [
    HomeScreen(),
    DiscoverScreen(),
    GivingScreen(),
    EventsScreen(),
    SettingsScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentIndex,
        children: screens,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: kPrimaryColor,
        selectedItemColor: kSelectedItemColor,
        iconSize: kBottomNavIconSize,
        unselectedItemColor: kAlternativeColor,
        selectedFontSize: kBottomNavFontSize,
        unselectedFontSize: kBottomNavFontSize,
        showUnselectedLabels: true,
        showSelectedLabels: true,
        currentIndex: currentIndex,
        onTap: (index) => setState(() => currentIndex = index),
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              CupertinoIcons.mic_fill,
            ),
            label: 'Sermons',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              CupertinoIcons.wand_stars_inverse,
            ),
            label: 'Discover',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              CupertinoIcons.heart_fill,
            ),
            label: 'Giving',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              CupertinoIcons.calendar_today,
            ),
            label: 'Events',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              CupertinoIcons.gear_alt_fill,
            ),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

Here is a picture of a view that has a bottom nav

Here is a picture of a view that has not a bottom nav

import 'package:church_app/components/widgets/animated_like_button.dart';
import 'package:church_app/components/widgets/custom_bottom_nav_bar.dart';
import 'package:church_app/components/widgets/navigation_drawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:church_app/utilities/constants.dart';
import 'package:church_app/components/widgets/action_and_text.dart';

class SermonDescriptionScreen extends StatefulWidget {
  @override
  _SermonDescriptionScreenState createState() =>
      _SermonDescriptionScreenState();
}

class _SermonDescriptionScreenState extends State<SermonDescriptionScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        endDrawer: NavigationDrawer(),
        appBar: AppBar(
          leading:
              (ModalRoute.of(context)?.canPop ?? false) ? BackButton() : null,
          iconTheme: IconThemeData(color: kPrimaryColor),
          elevation: 0,
          title: Text(
            'Protect The Vessel',
            style: kMainStyling,
          ),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SafeArea(
            left: true,
            right: true,
            top: true,
            bottom: true,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 250,
                  decoration: BoxDecoration(
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                        color: Colors.grey[300],
                        blurRadius: 30,
                        offset: Offset(0, 10),
                      ),
                    ],
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/pastor.jpg'),
                    ),
                  ),
                ),
                addVSpace(30),
                Container(
                  margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Protect The Vessel',
                        style: kDescriptionTitle,
                        softWrap: true,
                      ),
                      addVSpace(3),
                      Text(
                        'Pastor James Wiseman',
                        style: kMainStyling.copyWith(
                          color: kPrimaryColor.withOpacity(.8),
                        ),
                        softWrap: true,
                      ),
                      addVSpace(3),
                      Row(
                        children: [
                          Text(
                            'Jan 25, 2021',
                            style: kMainStyling.copyWith(
                              color: kPrimaryColor.withOpacity(.8),
                            ),
                            softWrap: true,
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 10, right: 10),
                            child: Container(
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: kPrimaryColor,
                              ),
                              width: 8,
                              height: 8,
                            ),
                          ),
                          Container(
                            child: AnimatedLikeButton(),
                          ),
                        ],
                      ),
                      addVSpace(20),
                      Text(
                        'Are you protecting what matters? In Protect What Matters, Pastor James Wiseman reminds us that we are vessels that can either foster bitterness or make way for the healing hand of God in our lives.',
                        style: kMainStyling,
                        softWrap: true,
                        textAlign: TextAlign.justify,
                        maxLines: 6,
                      ),
                      addVSpace(30),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          ActionAndText(
                            correspondingIcon:
                                CupertinoIcons.arrow_down_to_line_alt,
                            correspondingText: 'Download',
                            gesture: () {},
                          ),
                          ActionAndText(
                            correspondingIcon: CupertinoIcons.heart,
                            correspondingText: 'Like',
                            gesture: () {},
                          ),
                          ActionAndText(
                            correspondingIcon: CupertinoIcons.play,
                            correspondingText: 'Listen',
                            gesture: () {
                              Navigator.pushNamed(context, '/playerScreen');
                            },
                          ),
                          ActionAndText(
                            correspondingIcon: CupertinoIcons.square_arrow_up,
                            correspondingText: 'Share',
                            gesture: () {},
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

The problem with inbuilt BottomNavigationBar doesn't have ability to show to every screen,there is plugin called Presistant_bottom_nav_bar,here is some sample code for more checkout other properties of PersistentTabView,animation,state,hide bottombar when keyboard comes up kind of stuff

Also checkout this material guideline do's and don'ts bottom-navigation if you are not interested in using the plugin

 PersistentTabController _controller =PersistentTabController(initialIndex: 
              0);
    
    //Screens for each nav items.
      List<Widget> _NavScreens() {
        return [
         HomeScreen(),
         DiscoverScreen(),
         GivingScreen(),
         EventsScreen(),
         SettingsScreen(),
          
        ];
      }
    
    
      List<PersistentBottomNavBarItem> _navBarsItems() {
        return [
          PersistentBottomNavBarItem(
           icon: Icon(CupertinoIcons.mic_fill),
            title: ("Home"),
            activeColor: CupertinoColors.activeBlue,
            inactiveColor: CupertinoColors.systemGrey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(CupertinoIcons.wand_stars_inverse),
            title: ("Discover"),
            activeColor: CupertinoColors.activeGreen,
            inactiveColor: CupertinoColors.systemGrey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(CupertinoIcons.heart_fill),
            title: ("Giving"),
            activeColor: CupertinoColors.systemRed,
            inactiveColor: CupertinoColors.systemGrey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(CupertinoIcons.calendar_today),
            title: ("Events"),
            activeColor: CupertinoColors.systemIndigo,
            inactiveColor: CupertinoColors.systemGrey,
          ),
     PersistentBottomNavBarItem(
            icon: Icon(CupertinoIcons.gear_alt_fill),
            title: ("Settings"),
            activeColor: CupertinoColors.systemIndigo,
            inactiveColor: CupertinoColors.systemGrey,
          ),
    
        ];
      }
    @override
    Widget build(BuildContext context) {
        return Center(
          child: PersistentTabView(
            controller: _controller,
            screens: _NavScreens(),
            items: _navBarsItems(),
            confineInSafeArea: true,
            backgroundColor: Colors.white,
            handleAndroidBackButtonPress: true,
            resizeToAvoidBottomInset: true,
            hideNavigationBarWhenKeyboardShows: true,
            decoration: NavBarDecoration(
              borderRadius: BorderRadius.circular(10.0),
            ),
            popAllScreensOnTapOfSelectedTab: true,
            navBarStyle: NavBarStyle.style9,
          ),
        );
    }

You can use this navigate and use the BottomNavigationBar with navigator provided by the plugin

pushNewScreen(
        context,
        screen: SubScreenNames(),
        withNavBar: true,
        pageTransitionAnimation: PageTransitionAnimation.cupertino,
    );

Answer 2

You can use this package https://pub.dev/packages/persistent_bottom_nav_bar for persistent bottom navigator in all Screen,

And when try to navigate to new screen use this below navigator function,

pushNewScreen(
        context,
        screen: MainScreen(),
        withNavBar: true, // OPTIONAL VALUE. True by default.
        pageTransitionAnimation: PageTransitionAnimation.cupertino,
    );

Answer 3

to get this you can use pageView with bottomNavigationBar... this is a sample code. this will give idea how to go about it..

 Scaffold buildAuthScreen() {
    return Scaffold(
      body: PageView(
        scrollDirection: Axis.horizontal,
        children: [
          Timeline(),
          ActivityFeedItem(),
          Search(),
          Upload(),
          Profile(
            currentUser: _auth.currentUser.uid,
          ),
        ],
        controller: _pageController,
        onPageChanged: (value) {
          setState(() {
            pageIndex = value;
          });
        },
        physics: BouncingScrollPhysics(),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: pageIndex,
        height: 50.0,
        color: Theme.of(context).primaryColor,
        items: [
          Icon(Icons.whatshot, color: Colors.white),
          Icon(Icons.notifications_active, color: Colors.white),
          Icon(Icons.search, color: Colors.white),
          Icon(Icons.photo_camera, color: Colors.white),
          Icon(Icons.account_circle, color: Colors.white),
        ],
        animationDuration: Duration(milliseconds: 200),
        buttonBackgroundColor: Theme.of(context).accentColor,
        backgroundColor: Colors.white,
        onTap: (int pageIndex1) {
          _pageController.animateToPage(pageIndex1,
              duration: Duration(microseconds: 300), curve: Curves.bounceInOut);
        },
      ),
    );
  }

Answer 4

Use custom_navigator 0.3.0 package from pub dev website