ff_navigation_bar 0.1.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

ff_navigation_bar #

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

Add dependency #

dependencies:
  ff_navigation_bar: ^0.1.4

Basic use #

import 'package:flutter/material.dart';
import 'package:ff_navigation_bar/ff_navigation_bar.dart';
...
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Demonstration',
            ),
          ],
        ),
      ),
      bottomNavigationBar: FFNavigationBar(
        theme: FFNavigationBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemBorderColor: Colors.yellow,
          selectedItemBackgroundColor: Colors.green,
          selectedItemIconColor: Colors.white,
          selectedItemLabelColor: Colors.black,
        ),
        selectedIndex: selectedIndex,
        onSelectTab: (index) {
          setState(() {
            selectedIndex = 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)
  • selectedItemBorderColor: The color for the selected item's border (default = white)
  • 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

[0.1.5] - 22-FEB-2020 #

  • Fixed bug where hitbox for each navigation item collapsed to its content size. Now uses a SizedBox to fix the hitbox to the theme's barHeight value and the navigation bar's width / number of items in the bar. This gives a uniform hitbox size for each item.

[0.1.4] - 20-JAN-2020 #

  • Maintenance release with support for Provider library version 4.0.2

[0.1.3] - 20-DEC-2019 #

  • Fixed bug where setting showSelectedItemShadow = false in the theme did not hide the shadow on the navbar
  • Demo app updated to a taller bar height and cleaner style for better display across devices

[0.1.2] - 27-NOV-2019 #

  • Added support for selectedItemBorderColor in the theme options

[0.1.1] - 16-NOV-2019 #

  • Fixed example code and tidied deployment structure

[0.1.0] - 16-NOV-2019 #

  • Included example code

[0.0.1] - 15-NOV-2019 #

  • First release of the package

example/lib/main.dart

import 'package:ff_navigation_bar/ff_navigation_bar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ff_navigation_bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ff_navigation_bar Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Demonstration',
            ),
          ],
        ),
      ),
      bottomNavigationBar: FFNavigationBar(
        theme: FFNavigationBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemBorderColor: Colors.transparent,
          selectedItemBackgroundColor: Colors.green,
          selectedItemIconColor: Colors.white,
          selectedItemLabelColor: Colors.black,
          showSelectedItemShadow: false,
          barHeight: 70,
        ),
        selectedIndex: selectedIndex,
        onSelectTab: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: [
          FFNavigationBarItem(
            iconData: Icons.calendar_today,
            label: 'Bar Theme',
          ),
          FFNavigationBarItem(
            iconData: Icons.people,
            label: 'Orange',
            selectedBackgroundColor: Colors.orange,
          ),
          FFNavigationBarItem(
            iconData: Icons.attach_money,
            label: 'Purple',
            selectedBackgroundColor: Colors.purple,
          ),
          FFNavigationBarItem(
            iconData: Icons.note,
            label: 'Blue',
            selectedBackgroundColor: Colors.blue,
          ),
          FFNavigationBarItem(
            iconData: Icons.settings,
            label: 'Red Item',
            selectedBackgroundColor: Colors.red,
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  ff_navigation_bar: ^0.1.5

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:ff_navigation_bar/ff_navigation_bar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
92
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • ff_navigation_bar that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
provider ^4.0.2 4.3.1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
nested 0.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test