Tutorial 5 - Flutter Bottom Navigation Bar implementation using curved_navigation_bar Library

This is the 5th tutorial of the Flutter Bottom Navigation Series. Till then we have learned how to make bottom navigation bar on any app using flutter’s own package and third party packages. Hope you are learning new things from every tutorial and making awesome flutter apps. Flutter development is now becoming a new trend all over the world.

In this tutorial, we will usecurved_navigation_bar to make beautiful bottom navigation bar and some tabs. The library is very easy to use as the previous libraries. If you landed directly on this article then I suggest to read the previous one also, you will have some awesome stuff related to bottom navigation.

Implementation

First of all we need to add dependency, to add functionality of library in flutter app

 curved_navigation_bar: any

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

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

CurvedNavigationBar()

home_tab_screen.dart – Tab 1

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

class HomeTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.blue,
    );
  }
}

profile_tab_screen.dart – Tab 2

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

class ProfileTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.green,
    );
  }
}

order_tab_screen.dart – Tab 3

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

class ProfileTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.green,
    );
  }
}

search_tab_screen.dart – Tab 4

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

class SearchTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.orange,
    );
  }
}

bag_tab_screen.dart – Tab 5

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

class BagTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: MediaQuery.of(context).size.height, color: Colors.black);
  }
}

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

List<Widget> _listPages = [
    HomeTabScreen(),
    BagTabScreen(),
    OrdersTabScreen(),
    ProfileTabScreen(),
    SearchTabScreen()
  ];

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:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_curved_navigation_bar/tabs/bag_tab_screen.dart';
import 'package:flutter_curved_navigation_bar/tabs/home_tab_screen.dart';
import 'package:flutter_curved_navigation_bar/tabs/orders_tab_screen.dart';
import 'package:flutter_curved_navigation_bar/tabs/profile_tab_screen.dart';
import 'package:flutter_curved_navigation_bar/tabs/search_tab_screen.dart';

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

class _MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  List<Widget> _listPages = [
    HomeTabScreen(),
    BagTabScreen(),
    OrdersTabScreen(),
    ProfileTabScreen(),
    SearchTabScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          index: 0,
          height: 50.0,
          items: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
            Icon(Icons.call_split, size: 30),
            Icon(Icons.perm_identity, size: 30),
          ],
          color: Colors.white,
          buttonBackgroundColor: Colors.white,
          backgroundColor: Colors.blueAccent,
          animationCurve: Curves.easeInOut,
          animationDuration: Duration(milliseconds: 600),
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
        ),
        body: _listPages[_page]);
  }
}

Attributes

items: List of Widgets
index: index of NavigationBar, can be used to change current index or to set initial index
color: Color of NavigationBar, default Colors.white
buttonBackgroundColor: background color of floating button, default same as color attribute
backgroundColor: Color of NavigationBar’s background, default Colors.blueAccent
onTap: Function handling taps on items
animationCurve: Curves interpolating button change animation, default Curves.easeOutCubic
animationDuration: Duration of button change animation, default Duration(milliseconds: 600)
height: Height of NavigationBar, min 0.0, max 75.0