Reputation: 209
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: "",
),
],
),
),
Upvotes: 0
Views: 1455
Reputation: 2327
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,
);
Upvotes: 1