Tutorial 2 – Flutter Bottom Navigation Bar implementation using FFNavigationBar Library

We are going to learn how to make a flutter bottom navigation bar using a third party library Flutter-FFNavigationBar , we will see implementation and other available options in the library. In our previous tutorial we had made a bottom navigation bar using the flutter own classes. 

Flutter-FFNavigationBar is very easy to implement,If you want to understand deeply and step by step about bottom navigation bar basics then you can read First Post.

Implementation 

First of all we need to add dependency

dependencies:
  ff_navigation_bar: any

Main classes we will use to make bottom navigation bar and tabs

FFNavigationBar()

FFNavigationBarItem()

And for customization 

FFNavigationBarTheme

Make screens which you want to open on tab tapping, I have create 4 screen as mentioned below-

Tab 1 – home_tab.dart

class HomeTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.red,
   );
 }
}

Tab 2 – category_tab.dart

class CategoryTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.blue,
   );
 }

Tab 3- notification_tab.dart

class NotificationTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.green,
   );
 }
}

Tab 4- about_tab.dart

class AboutTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.black,
   );
 }
}

Now add widgets in a list so that we can call on the basis of index tapped.

List<Widget> screensList=[HomeTab(),CategoryTab(),NotificationTab(),AboutTab()];

When index 0 will tapp that is Home Tab it will call screenList 0 index that is HomeTab() and so on. The complete implementation code is given below- 

import 'package:ff_navigation_bar/ff_navigation_bar.dart';
import 'package:ff_navigation_bar_example/tabs/about_tab.dart';
import 'package:ff_navigation_bar_example/tabs/category_tab.dart';
import 'package:ff_navigation_bar_example/tabs/home_tab.dart';
import 'package:ff_navigation_bar_example/tabs/notification_tab.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

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

 List<Widget> _listScreens = [
   HomeTab(),
   CategoryTab(),
   AboutTab(),
   NotificationTab()
 ];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('FF Navigation Bar Lib Example'),
     ),
     body: _listScreens[_selectedIndex],
     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.home,
           label: 'Home',
         ),
         FFNavigationBarItem(
           iconData: Icons.category,
           label: 'Category',
         ),
         FFNavigationBarItem(
           iconData: Icons.info,
           label: 'About Us',
         ),
         FFNavigationBarItem(
           iconData: Icons.settings,
           label: 'Settings',
         ),
       ],
     ),
   );
 }
}


For more customization flutter bottom navigation using FFNavigationBar plugin have some other properties which can be used as per requirement, have a look 

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)

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

 Click here to check library