Configurable navigation bar for Flutter

ff navigation bar

a highly configurable navigation bar with emphasis for the selected item.

add dependency

dependencies:
  ff_navigation_bar: ^0.0.1

basic use

import 'package:flutter/material.dart';
import 'package:ff_navigation_bar/ff_navigation_bar.dart';
...
          return scaffold(
            backgroundcolor: colors.grey[200],
            body: customscrollview(
              slivers: [
                essliverappbar(
                  context: context,
                  title: homedata.gettitle(),
                  actions: homedata.getavailableactions(),
                  forceelevated: true,
                ),
                sliverfillremaining(
                  child: homedata.getchild(),
                ),
              ],
            ),
            bottomnavigationbar: ffnavigationbar(
              theme: ffnavigationbartheme(
                barbackgroundcolor: colors.white,
                selecteditembackgroundcolor: colors.green,
                selecteditemiconcolor: colors.white,
                selecteditemlabelcolor: colors.black,
              ),
              selectedindex: 1,
              onselecttab: (index) {},
              items: [
                ffnavigationbaritem(
                  icondata: icons.calendar_today,
                  label: 'schedule',
                ),
                ffnavigationbaritem(
                  icondata: icons.people,
                  label: 'contacts',
                ),
                ffnavigationbaritem(
                  icondata: icons.attach_money,
                  label: 'bills',
                ),
                ffnavigationbaritem(
                  icondata: icons.note,
                  label: 'notes',
                ),
                ffnavigationbaritem(
                  icondata: icons.settings,
                  label: 'settings',
                ),
              ],
            ),
          );

theme

the navbar has a theme class which can be used to define the majority of appearance settings for the navbar and its items.

• barbackgroundcolor: the background color for the entire bar (default = white)
• selecteditembackgroundcolor: the background color for the circleavatar widget used to display the selected item’s icon (default = blueaccent)
• selecteditemiconcolor: the color for the selected item’s icon (default = white)
• selecteditemlabelcolor: the color for the selected item’s label (default = black)
• unselecteditembackgroundcolor: the background color for unselected items (default = transparent)
• unselecteditemiconcolor: the color for unselected items’ icons (default = grey)
• unselecteditemlabelcolor: the color for unselected items’ icons (default = grey)
• selecteditemtextstyle: the text style to use for the selected item’s label. the selecteditemlabelcolor takes priority over any color attribute of the style (defaults to size = 13.0, weight = bold)
• unselecteditemtextstyle: the text style to use for the unselected items’ labels (defaults to size = 12.0, weight = normal)
• barheight: the height for the bar (which is automatically included within a safearea widget)
• itemwidth: the width to use for the selected item circleavater (default = 48.0)
• showselecteditemshadow: indicates if the drop shadow below the selected item should be displayed (default = true)

ffnavigationbar attributes

• selectedindex: the item number (zero indexed) which should be marked as selected
• onselecttab: callback function to receive tap notifications using the typedef function(int selectedindex)
• items: list of ffnavigationbaritem objects to be displayed as the bar’s items
• theme: a ffnavigationbartheme theme object

ffnavigationbaritem

• label: the string to display as the item’s label
• icondata: the icondata to use in the item’s icon
• animationduration: a duration object which can be used to tweak the animatedcontainer behaviour of the navigation bar item.
• selectedbackgroundcolor: a color value which can override the theme’s selecteditembackgroundcolor value for a specific navigation bar item (used to create different colors for each item)
• selectedforegroundcolor: a color value which can override the theme’s selecteditemiconcolor value
• selectedlabelcolor: a color value which can override the theme’s selecteditemlabelcolor value