bmnav

A very 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.4

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(
			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
colorbackground colorColors.white
iconStyleicon styles (size, onSelectSize, color, onSelectColor)null
labelStylelabel styles (visible, showOnSelect, textStyle, onSelectTextStyle)null

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