Easy way to create Curved Bottom Navigation Bar in Flutter

Bottom Navigation Bar is a cool widget provided by flutter framework, which is a type of navigational user interface widely found in mobile applications.

In this tutorial, we are going to create a bottom navigation bar using a flutter package called Curved Navigation Bar.

A Curved Navigation Bar is a custom package which creates stunning curved shaped navigation bar with adjustable colors such as background color, text color. It also comes with animation curve and animation duration that helps us to create different types of animations and also set animation time respectively.

So, Lets start with creating a new flutter project in Android Studio by going to File => New => New Flutter Project.

Now once the project is created successfully, we will have to follow these two simple steps:

  1. Adding the package name into pubspec.yaml file.
  2. Importing the package in the required file.
  3. Using the Curved Navigation Bar package.

1. Adding the package name into pubspec.yaml file

In order to download any custom package in our flutter project, all we need to do is to specify the package name into pubspec.yaml file.

In our case, we are using Curved Navigation Bar package, so according to its documentation, we will add curved_navigation_bar: ^0.3.1 dependency name to our pubspec.yaml file as shown below:

dev_dependencies:
  curved_navigation_bar: ^0.3.1
  flutter_test:
    sdk: flutter

After adding the code, click on Package get option to download it into your flutter project.

2. Importing the package in the required file

Now after adding the dependency and downloading, in order to use any package, we must import it before using it. So, in our case, we will import it in our main.dart file as:

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

3. Using the Curved Navigation Bar Package

Now, We will create the Stateful Widget and inside the Scaffold widget we will add the following code:

 bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.white,
        color: Colors.deepPurple,
        buttonBackgroundColor: Colors.deepPurple,
        height: 60,
        animationDuration: Duration(
          milliseconds: 200,
        ),
        index: 2,
        animationCurve: Curves.bounceInOut,
        items: <Widget>[
          Icon(Icons.favorite, size: 30, color: Colors.white),
          Icon(Icons.verified_user, size: 30, color: Colors.white),
          Icon(Icons.home, size: 30, color: Colors.white),
          Icon(Icons.settings, size: 30, color: Colors.white),
          Icon(Icons.more_horiz, size: 30, color: Colors.white),
        ],
        onTap: (index) {
          //Handle button tap
        },
      )

Now lets understand the above code.

backgroundColor: It is the Color of NavigationBar’s background. By default, its set to Colors.blueAccent.

color: It is the color of the navigation bar. Default color is Colors.white.

buttonBackgroundColor: It is the background color of floating button. By default, its same as color attribute.

height: It is the height of the bottom navigation bar.

animationDuration: It is the duration of button change animation, default Duration is milliseconds: 600.

index: Index determines the default selected button. In our case home button is selected and is at position 2 because its at 3rd position and array index always starts with 0 by default (0,1,2..). So its set to 2.

animationCurve: It is the curves interpolating button change animation, By default its set to Curves.easeOutCubic.

items: It is the list of widgets which makes the contents (icons and titles) in our bottom navigation bar.

ontap(index): It gets the index of the tapped button (Icon) in the navigation bar so that we can route to the particular screen when its tapped.

Now, Our final main.dart file will have the following code:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Bottom Navigation Bar Demo",
        debugShowCheckedModeBanner: false,
        home: MyBottomNavigationBarDemo());
  }
}

class MyBottomNavigationBarDemo extends StatefulWidget {
  @override
  _MyBottomNavigationBarDemoState createState() =>
      _MyBottomNavigationBarDemoState();
}

class _MyBottomNavigationBarDemoState extends State<MyBottomNavigationBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Demo'),
        backgroundColor: Colors.deepPurple,
      ),
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.white,
        color: Colors.deepPurple,
        buttonBackgroundColor: Colors.deepPurple,
        height: 60,
        animationDuration: Duration(
          milliseconds: 200,
        ),
        index: 2,
        animationCurve: Curves.bounceInOut,
        items: <Widget>[
          Icon(Icons.favorite, size: 30, color: Colors.white),
          Icon(Icons.verified_user, size: 30, color: Colors.white),
          Icon(Icons.home, size: 30, color: Colors.white),
          Icon(Icons.settings, size: 30, color: Colors.white),
          Icon(Icons.more_horiz, size: 30, color: Colors.white),
        ],
        onTap: (index) {
          //Handle button tap
        },
      ),
    );
  }
}

At Last our app will have the following navigation bar as shown in the screenshot below:

Bottom Navigation Bar in Flutter Example
Bottom Navigation Bar in Flutter Example

Happy Coding! 🙂