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
Click here to check library in depth

Er. Sandeep Singh Sidhu

I am the founder of CallStem Software LLP and Stem Technocrats IT Services, Blood Wallet, Apni Boli, and of course flutterfumes.com.
I am very passionate about technology and learning new things. I believe sharing knowledge is the most powerful way to learn. One who is an active learner is always an active contributor too because whatever you learn, you should implement.

I also love to write poetry, and talking to myself is my favorite all-time activity, no matter it is a program logic, emotional poetry, or a social issue.

Previous Post
Next Post

Leave a Reply

Your email address will not be published.

Hey, wait! If You don't want to miss Flutter Updates!

Please join our Newsletter List and enjoy with daily Flutter Updates