bmnav

A highly flexible Flutter implementation of the Bottom Navigation Bar.

Pub PayPal

BottomNavigationBar with label

BottomNavigationBar with label when selected

BottomNavigationBar without label

Get Started

Add bmanv to your pubspec.yaml file:

dependencies:
  bmnav: ^0.3.3

Import bmnav in your main.dart file:

import 'package:bmnav/bmnav.dart' as bmnav;

Implement bmnav.BottomNav in the bottomNavigationBar parameter in the Scaffold widget:

@override
Widget build(BuildContext ctx) {
	return Scaffold(
		appBar: AppBar(title: Text('Bottom Nav Demo')),
		body: Container(child: Text('Hello World')),
		bottomNavigationBar: bmnav.BottomNav(
			index: 0,
			onTap: (i) {},
			items: [
				bmnav.BottomNavItem(Icons.home),
				bmnav.BottomNavItem(Icons.fitness_center),
				bmnav.BottomNavItem(Icons.person),
				bmnav.BottomNavItem(Icons.view_headline)
			],
		),
	);
}

You can find a fully fledged example with navigation and custom styles here.

Props

NameExplanationDefault
indexstarting index0
onTapcallback when a bottom nav item is pressednull
itemsbottom nav itemsnull
elevationelevation of bottom nav8.0
showLabelshows or hides labelfalse
showSelectedLabelshows or hides label when icon selectedfalse
backgroundColorbackground color of bottom navColors.white
colordefault icon colormd.Colors.grey700
selectedColorcolor of icon when selectedmd.Colors.blue
iconSizedefault icon size24.0
selectedIconSizesize of the icon when selected24.0

Contributions

Feel free to contribute to this project.

Support

If you found this project to be useful then please consider donating to help me continue maintaining this project and create new projects. :)

Paypal Donate Button

Libraries

bmnav