Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial example we will create a Bottom Navigation Bar by using Curved Navigation Bar Library.

Introduction to Curved Bottom Navigation bar Flutter Library

By using this flutter package library you can easily create a Home Page/MainPage with Animated Bottom Navigation bar, This Flutter UI Library is very easy to implementation of curved navigation bar.

DEMO ON FINAL RESULT OF THIS FLUTTER TUTORIAL

Adding this Curved Bottom Navigation bar library in our flutter Project

Step 1: Adding the Dependencies

dependencies:
  curved_navigation_bar: ^0.3.2 #latest version

Once, you add the dependencies you need to click on pub get button/text, What it does is it download all the required classes or library in you flutter project.

Step 2: Importing the library wherever required to use

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

for example: if you want to add curved bottom navigation bar in main page of your flutter application, then open main.dart file and add the import package line on top.

Snippet code of how to use this library

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //Handle button tap
    },
  ),
  body: Container(color: Colors.blueAccent),
)

In Scaffold widget, we have an option to add bottomNavigationBar where you can add your own custom Navigation bar or any of the ready name library.

Different Customizable Attributes of this Library

items : This accepts any kind of widgets. for eg : Icons in our case

index : can be used to change current navigation bar  or to set initial index when the app starts

color: to set Color of the bar, by default colors is been set to white.

buttonBackgroundColor: used to color of floating button on the bar. default is white.

backgroundColor : this color will be visible to the active bar or index.

onTap: trigger when used want to change the page or want to see any other contents.

animationCurve: Curves interpolating button change animation, default Curves.easeOutCubic, There are many more Curves animation you many like to use.

for more Curvers animation transaction effect visit here

animationDuration: Duration of button change animation, default Duration(milliseconds: 600).

height: Height of NavigationBar, min 0.0, max 75.0.

Then, thus we have learned more about this library.

Flutter Animated Bottom Navigation bar – Complete Code Flutter Examples

Create a new Flutter Project and add the dependencies in pubspec.yaml file as described in above Steps

Then, create 3 new dart pages

1. HomePage.dart
2. WorkPage.dart
3. IdeaPage.dart

No need to give same name, you can name it as per you choice,

To create those pages follow this steps:

(Right Click) Lib > New > Dart File 

Give a name to the dart file 

Then add the following flutter dart code into those dart files.

HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: Center(
        child: Container(
          child: Text(
            "THIS IS HOME PAGE",
            style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w700),
          ),
        ),
      ),
    );
  }
}

WorkPage.dart

import 'package:flutter/material.dart';

class WorkPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink,
      body: Center(
        child: Container(
          child: Text(
            "THIS IS WORK PAGE",
            style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w700),
          ),
        ),
      ),
    );
  }
}

IdeaPage.dart

import 'package:flutter/material.dart';

class IdeaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      body: Center(
        child: Container(
          child: Text(
            "THIS IS IDEA PAGE",
            style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w700),
          ),
        ),
      ),
    );
  }
}

The above 3 pages will get replaced/displayed when uses click or Tap on any of the Bottom Navigation bar.

Final the main page where all the activity happens

main.dart

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:curvedbottomnavbar/HomePage.dart';
import 'package:curvedbottomnavbar/IdeaPage.dart';
import 'package:curvedbottomnavbar/WorkPage.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Curved Novigation Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  
  int selectedpage = 0; //initial value 
  
  final _pageOptions = [HomePage(), WorkPage(), IdeaPage()]; // listing of all 3 pages index wise
  
  final bgcolor = [Colors.orange, Colors.pink, Colors.greenAccent];  // changing color as per active index value
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageOptions[selectedpage], // initial value is 0 so HomePage will be shown 
      bottomNavigationBar: CurvedNavigationBar(
        height: 50, 
        buttonBackgroundColor: Colors.blueAccent,
        backgroundColor: bgcolor[selectedpage],
        color: Colors.white,
        animationCurve: Curves.linearToEaseOut,
        items: <Widget>[
          Icon(
            Icons.home,
            size: 30,
            color: Colors.black,
          ),
          Icon(
            Icons.work,
            size: 30,
            color: Colors.black,
          ),
          Icon(
            Icons.wb_incandescent,
            size: 30,
            color: Colors.black,
          )
        ],
        onTap: (index) {
          setState(() {
            selectedpage = index;  // changing selected page as per bar index selected by the user
          });
        },
      ),
    );
  }
}