简体   繁体   中英

Flutter keep bottom navigation bar when navigating to non item

is there a way to make the bottom navigation bar visible when navigating to page that's not part of bottom navigation bar items?

EDIT: i used the package persistent_bottom_nav_bar from pub.dev that @Abhijith recommend it for me and it worked really good but i want to make a custom navigation bar, but i faced some troubles editing it, this is the design that i want to achieve using persistent_bottom_nav_bar

在此处输入图像描述

and this is the code for that design using bottom navigation bar:

 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        margin: EdgeInsets.only(
          top: 70.0,
        ),
        height: 72.0,
        width: 72.0,
        child: FloatingActionButton(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          onPressed: () {},
          child: Stack(
            children: [
              Image.asset(
                'assets/images/Ellipse 348.png',
              ),
              Container(
                margin: EdgeInsets.only(
                  left: 23.0,
                  top: 20.0,
                ),
                child: Image.asset(
                  'assets/images/Icon feather-shopping-cart.png',
                ),
              ),
            ],
          ),
        ),
      ),    
bottomNavigationBar: Container(
            height: 70.0,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(30),
                topLeft: Radius.circular(30),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.8),
                  spreadRadius: 10,
                  blurRadius: 5,
                  offset: Offset(0, 7),
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),
              ),
              child: BottomNavigationBar(
                onTap: _onItemTapped,
                selectedFontSize: 0,
                backgroundColor: Colors.white,
                showSelectedLabels: false,
                showUnselectedLabels: false,
                type: BottomNavigationBarType.fixed,
                items: [
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 0
                        ? CircleAvatar(
                            backgroundImage: NetworkImage(
                              'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                            ),
                            child: Image.asset(
                              'assets/images/AccueilSelected.png',
                            ),
                          )
                        : Image.asset('assets/images/Accueil.png'),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 1
                        ? Container(
                            margin: EdgeInsets.only(
                              right: 42.0,
                            ),
                            child: CircleAvatar(
                              backgroundImage: NetworkImage(
                                'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                              ),
                              child: Stack(
                                children: [
                                  Image.asset(
                                      'assets/images/Group 494Selected.png'),
                                  Container(
                                    margin: EdgeInsets.only(
                                      left: 19.0,
                                      // top: 0.8,
                                    ),
                                    child: Image.asset(
                                        'assets/images/Ellipse 341.png'),
                                  ),
                                ],
                              ),
                            ),
                          )
                        : Container(
                            margin: EdgeInsets.only(
                              right: 42.0,
                            ),
                            child: Stack(
                              children: [
                                Image.asset('assets/images/Group 494.png'),
                                Container(
                                  margin: EdgeInsets.only(
                                    left: 19.0,
                                    // top: 0.8,
                                  ),
                                  child:
                                      Image.asset('assets/images/Ellipse 341.png'),
                                ),
                              ],
                            ),
                          ),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 2
                        ? Container(
                            margin: EdgeInsets.only(
                              left: 38.0,
                            ),
                            child: CircleAvatar(
                              backgroundImage: NetworkImage(
                                'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                              ),
                              child: Image.asset(
                                'assets/images/Icon ionic-ios-heart-emptySelected.png',
                              ),
                            ),
                          )
                        : Container(
                            margin: EdgeInsets.only(
                              left: 38.0,
                            ),
                            child: Image.asset(
                                'assets/images/Icon ionic-ios-heart-emptyBlack.png'),
                          ),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 3
                        ? CircleAvatar(
                            backgroundImage: NetworkImage(
                              'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                            ),
                            child: Image.asset(
                              'assets/images/Icon open-menuSelected.png',
                            ),
                          )
                        : Image.asset(
                            'assets/images/Icon open-menu.png',
                            width: 24.0,
                            height: 21.0,
                          ),
                    label: "",
                  ),
                ],
              ),
            ),

With using this plugin Presistant_bottom_nav_bar .so you can use bottomnavbar on every screen or you can do the above method

PersistentTabController _controller =PersistentTabController(initialIndex: 0);

//Screens for each nav items.
  List<Widget> _NavScreens() {
    return [
     HomeScreen(),
     OfferScreen(),
     HelpScreen(),
     ProfileScreen(),
     CartViewScreen(),
      
    ];
  }


  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
       icon: Icon(Icons.home),
        title: ("Home"),
        activeColor: CupertinoColors.activeBlue,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.favorite),
        title: ("OFFERS"),
        activeColor: CupertinoColors.activeGreen,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.person_pin),
        title: ("Help"),
        activeColor: CupertinoColors.systemRed,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.local_activity),
        title: ("ProfileScreen"),
        activeColor: CupertinoColors.systemIndigo,
        inactiveColor: CupertinoColors.systemGrey,
      ),
 PersistentBottomNavBarItem(
        icon: Icon(Icons.shop_cart),
        title: ("Cart"),
        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,
      ),
    );
}

Also you can use navigationbottombar in certain screen by using navigator-functions for more details checkout persistent_bottom_nav_bar#navigator-functions

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM