bottom_nav_bar
An easy-to-use and clean bottom navigation bar.
| Preview 1 | Preview 2 |
|---|---|
 |
 |
| Preview 3 | |
| --------- | |
 |
Available Customization options
BottomNavBar
iconSize- the item icon's sizeitems- navigation items, item length should be from 3 to 5selectedIndex- the current item index. Use this to change the selected item. Defaults to zeroonItemSelected- required to listen when an item is tapped it provides the selected item's indexbackgroundColor- the navigation bar's background colorshowElevation- if false the appBar's elevation will be removedmainAxisAlignment- use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the itemscurve- param to customize the item change's animationcontainerHeight- changes the Navigation Bar's heightcontainerPadding- changes the Navigation Bar's padding
BottomNavBarItem
icon- the icon of this itemtitle- the text that will appear next to the icon when this item is selectedactiveColor- the active item's icon and text colorinactiveColor- the inactive item's icon coloractiveBackgroundColor- the active item's background colorinactiveBackgroundColor- the inactive item's background color
Basic Widget
import 'package:bottom_nav_bar/bottom_nav_bar.dart';
bottomNavigationBar: BottomNavBar(
showElevation: true,
selectedIndex: _currentIndex,
onItemSelected: (index) {
setState(() => _currentIndex = index);
},
items: <BottomNavBarItem>[
BottomNavBarItem(
title: 'Home',
icon: const Icon(Icons.home),
activeColor: Colors.white,
inactiveColor: Colors.black,
activeBackgroundColor: Colors.red.shade300,
),
BottomNavBarItem(
title: 'Profile',
icon: const Icon(Icons.person),
activeColor: Colors.white,
inactiveColor: Colors.black,
activeBackgroundColor: Colors.blue.shade300,
),
BottomNavBarItem(
title: 'Message',
icon: const Icon(Icons.chat_bubble),
inactiveColor: Colors.black,
activeColor: Colors.white,
activeBackgroundColor: Colors.green.shade300,
),
BottomNavBarItem(
title: 'Settings',
icon: const Icon(Icons.settings),
inactiveColor: Colors.black,
activeColor: Colors.black,
activeBackgroundColor: Colors.yellow.shade300,
),
],
)
Full Example using IndexedStack
import 'package:bottom_nav_bar/bottom_nav_bar.dart';
class RootPage extends StatefulWidget {
const RootPage({Key? key}) : super(key: key);
@override
_RootPageState createState() => _RootPageState();
}
class _RootPageState extends State<RootPage> {
int _currentIndex = 0;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _body(),
bottomNavigationBar: _bottomNavBar(),
);
}
Widget _body() => SizedBox.expand(
child: IndexedStack(
index: _currentIndex,
children: const <Widget>[
PageOne(),
PageTwo(),
PageThree(),
PageFour(),
],
),
);
Widget _bottomNavBar() => BottomNavBar(
showElevation: true,
selectedIndex: _currentIndex,
onItemSelected: (index) {
setState(() => _currentIndex = index);
},
items: <BottomNavBarItem>[
BottomNavBarItem(
title: 'Home',
icon: const Icon(Icons.home),
activeColor: Colors.white,
inactiveColor: Colors.black,
activeBackgroundColor: Colors.red.shade300,
),
BottomNavBarItem(
title: 'Profile',
icon: const Icon(Icons.person),
activeColor: Colors.white,
inactiveColor: Colors.black,
activeBackgroundColor: Colors.blue.shade300,
),
BottomNavBarItem(
title: 'Message',
icon: const Icon(Icons.chat_bubble),
inactiveColor: Colors.black,
activeColor: Colors.white,
activeBackgroundColor: Colors.green.shade300,
),
BottomNavBarItem(
title: 'Settings',
icon: const Icon(Icons.settings),
inactiveColor: Colors.black,
activeColor: Colors.black,
activeBackgroundColor: Colors.yellow.shade300,
),
],
);
}
8 Oct 31, 2022
4 Dec 21, 2022
21 Oct 26, 2021
38 Oct 17, 2022
23 Jan 15, 2022
112 Nov 23, 2022
1.5k Jan 8, 2023
251 Jan 2, 2023
17 Dec 14, 2022
23 Dec 27, 2022