bmnav 0.3.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 85

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

0.3.4 #

  • Added iconStyle paramater
  • Added labelStyle parameter
  • Removed showLabel parameter
  • Removed showSelectedLabel parameter.
  • Removed selectedColor parameter.
  • Removed iconSize parameter.
  • Removed selectedIconSize parameter.
  • Removed backgroundColor parameter.

0.3.1 #

  • Update README

0.3.0 #

  • Added elevation parameter.
  • Added color parameter.
  • Added selectedColor parameter.
  • Added iconSize parameter.
  • Added selectedIconSize parameter.
  • Added showLabel parameter.
  • Added showSelectedLabel parameter.
  • Added backgroundColor parameter.
  • Removed padding parameter.
  • Removed iconStyle parameter.
  • Removed selectedIconStyle parameter.

0.2.0 #

  • Added iconStyle and selectedIconStyle options.
  • Added padding option.
  • Added example/ directory.

0.1.0 #

  • Initial Release!

example/lib/main.dart

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

void main() {
  runApp(MaterialApp(
    title: 'Bottom Nav Demo',
    home: MainWidget(),
    theme: ThemeData(primaryColor: Colors.green),
  ));
}

class MainWidget extends StatefulWidget {
  @override
  MainWidgetState createState() => MainWidgetState();
} 

class MainWidgetState extends State<MainWidget> {
  int currentTab = 0;
  final List<Widget> screens = [
    HomeScreen(),
    WorkoutsScreen(),
    AccountScreen(),
    SettingsScreen()
  ];
  Widget currentScreen = HomeScreen();

  final PageStorageBucket bucket = PageStorageBucket();

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Nav Demo', style: TextStyle(color: Colors.black)),
        elevation: 2.0,
        backgroundColor: Colors.white,
      ),
      backgroundColor: Colors.white,
      body: PageStorage(child: currentScreen, bucket: bucket),
      bottomNavigationBar: bmnav.BottomNav(
        index: currentTab,
        labelStyle: bmnav.LabelStyle(visible: false),
        onTap: (i) {
          setState(() {
            currentTab = i;
            currentScreen = screens[i];
          });
        },
        items: [
          bmnav.BottomNavItem(Icons.home, label: 'Home'),
          bmnav.BottomNavItem(Icons.fitness_center, label: 'Workouts'),
          bmnav.BottomNavItem(Icons.person, label: 'Account'),
          bmnav.BottomNavItem(Icons.view_headline, label: 'Settings')
        ],
      ),
    );
  }
}

// Home Screen
class HomeScreen extends StatefulWidget {
  HomeScreen();
  @override
 HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext ctx) {
    return Center(
      child: Container(
        color: Colors.blue,
        padding: EdgeInsets.all(50.0),
        child: Text('Home', style: TextStyle(color: Colors.white, fontSize: 24.0)),
      ),
    );
  }
}

// Workouts Screen
class WorkoutsScreen extends StatefulWidget {
  WorkoutsScreen();
  @override
 WorkoutsScreenState createState() => WorkoutsScreenState();
}

class WorkoutsScreenState extends State<WorkoutsScreen> {
  @override
  Widget build(BuildContext ctx) {
    return Center(
      child: Container(
        color: Colors.red,
        padding: EdgeInsets.all(50.0),
        child: Text('Workouts', style: TextStyle(color: Colors.white, fontSize: 24.0)),
      ),
    );
  }
}

// Account Screen
class AccountScreen extends StatefulWidget {
  AccountScreen();
  @override
 AccountScreenState createState() => AccountScreenState();
}

class AccountScreenState extends State<AccountScreen> {
  @override
  Widget build(BuildContext ctx) {
    return Center(
      child: Container(
        color: Colors.yellow[600],
        padding: EdgeInsets.all(50.0),
        child: Text('Account', style: TextStyle(color: Colors.white, fontSize: 24.0)),
      ),
    );
  }
}

// Settings Screen
class SettingsScreen extends StatefulWidget {
  SettingsScreen();
  @override
 SettingsScreenState createState() => SettingsScreenState();
}

class SettingsScreenState extends State<SettingsScreen> {
  @override
  Widget build(BuildContext ctx) {
    return Center(
      child: Container(
        color: Colors.green,
        padding: EdgeInsets.all(50.0),
        child: Text('Settings', style: TextStyle(color: Colors.white, fontSize: 24.0)),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  bmnav: ^0.3.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:bmnav/bmnav.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
85
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
64
Overall:
Weighted score of the above. [more]
85
Learn more about scoring.

We analyzed this package on Apr 4, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/bmnav.dart.

Run flutter format to format lib/bmnav.dart.

Maintenance suggestions

Package is getting outdated. (-35.62 points)

The package was last published 70 weeks ago.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test