Configurable navigation bar for Flutter

55 Builds

Last update: Sep 22, 2022

Related tags

Templates Flutter-FFNavigationBar

Overview

ff_navigation_bar

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

Add dependency

dependencies:
  ff_navigation_bar: ^0.1.5

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

Comments

bugs

I think this library has alignment errors as you can see in the image, and it's dragged to the left. I have tried it on my phone and on the virtual machine.
question

opened by kieth1205 7
Alert notification on FFNavigationBarItem

I trying to insert a little circle on the icon on FFNavigationBarItem when I have new messages but I can´t do this. Any idea about this or it's just not possible? Something like this
enhancement

opened by joshuafriso 2
Support for Provider 4.x

4.0.0-dev release is available for Provider library. Will update FFNavigationBar when it moves from dev status. If you need to run with Provider 4.x release, a version of ff-navigation-bar is available on maintenance/provider-4.0.0-dev branch as WIP.

Also requires Flutter version >= 1.12.1 (dependency of Provider library) so make sure you've got an appropriate flutter (and related dart) SDK to use.
maintenance

opened by crockford55 1
Fix #3 - Feature for selectedItemBorderColor

Adds new option into the theme object allowing specification of a border colour for each tab bar item (instead of fixing to the bar background colour)

opened by crockford55 0
Hi, I have changed the overflow for Stack (it is not a parameter of S…

…tack anymore) and I changed the overflow into an attribute called clipBehavior. This fix is because the code did not work anymore with newer version of Flutter.

opened by DmgCoder 1
Linear Gradient

Hey, is there a way to add Linear gradient as bottom nav bar color, I tried several workarounds like making FFNavigationBar a child of a container with the linear gradient but only the top color shows the rest of the bar is white.

opened by CharlesTheProgrammerBrown 0
ff_navigation_bar did not support Provider 5.0.0

I am using plugin provider 5.0.0 but ff_navigation_bar keep from version solving when running flutter pub get.

/path/to/flutter/bin/flutter --no-color pub get Running "flutter pub get" in app...

Because ff_navigation_bar 0.1.5 depends on provider ^4.0.2 and no versions of ff_navigation_bar match >0.1.5 <0.2.0, ff_navigation_bar ^0.1.5 requires provider ^4.0.2. So, because app depends on both provider 5.0.0 and ff_navigation_bar ^0.1.5, version solving failed. pub get failed (1; So, because app depends on both provider 5.0.0 and ff_navigation_bar ^0.1.5, version solving failed.) Process finished with exit code 1

How to solve this? maybe support for provider 5.0.0? thank you

opened by azhar-rafiq 2
right to left not supported in web output

in right to left languages when i run my app in android mobile, everything work good but in chrome , labels are reverse in android device:

in chrome:

opened by Masoudmjm 0

Releases(0.1.5)

0.1.5(Feb 22, 2020)

Includes a fix to issue #14 by using SizedBox to fix the hitbox size on navigation items
Source code(tar.gz)
Source code(zip)
0.1.4(Jan 20, 2020)

Increments the pubspec.yaml to support Provider library version 4.x
Source code(tar.gz)
Source code(zip)
0.1.3(Dec 19, 2019)

Fixes theme issue preventing the ability to hide the selected item shadow. Also updates the demo app to use a bar theme which is more consistently displayed across devices.
Source code(tar.gz)
Source code(zip)
0.1.1(Nov 16, 2019)

Implemented example as direct source code (not child project) to create a leaner file structure for package
Source code(tar.gz)
Source code(zip)
0.1.0(Nov 16, 2019)

A release of the ff_navigation_bar package with a sub-project example.
Source code(tar.gz)
Source code(zip)
0.0.1(Nov 15, 2019)

First release of the ff_navigation_bar.
Source code(tar.gz)
Source code(zip)

Owner

55 Builds

GitHub

Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

2 Oct 25, 2022

Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

23 Dec 30, 2022

Configurable file explorer widget for Flutter

Filex Configurable file explorer widget for Flutter Usage Simple: import 'package:filex/filex.dart'; import 'package:path_provider/path_provider.dart'

16 Oct 13, 2022

Esizer - A Flutter package provide responsive, dynamic, configurable size for each device screen size

ESizer A Flutter package provide responsive, dynamic, configurable size for each

1 Feb 15, 2022

Access app version and git informations from auto-generated and configurable widgets

This is a proof of concept and WIP Feedback and ideas welcome !! Access your pubspec and git commit informations like versions and commit status from

15 Jul 7, 2021

An easy configurable and secure open-source personal password manager.

An easy configurable and secure open-source personal password manager. Anyone can you this project and generate his own personal mobile app. All the passwords will be saved into your own Firebase Firestone database with encryption.

18 Dec 28, 2022

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

112 Nov 11, 2022

Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

1 Apr 20, 2022

Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

4 Jan 26, 2020

This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app