Welcome to the Flutter tutorial, today we are going to discuss how to implement Animated Curved Navigation Bar into your android or iOS application.
Package name: curved_navigation_bar
How to add the dependency for animated curved navigation bar flutter package
Table of Contents
Flutter Bottom Navigation Bar Animation

add this line into your project pubspec.yaml file under dependency section.
dependencies:
curved_navigation_bar: ^0.3.1 #latest version
Be sure the indentation is correct.
If your indentation goes wrong it will generate an error.
Run command in command line
$ flutter pub get
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Import this line at the beginning in your main.dart file
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
In .yaml file # sign is used for comments on any line of text.
Now assign this widget as Scaffold attribute value for the bottom Navigation Bar:
Flutter Bottom Navigation Bar Animation Sample Code:
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),
)
These widgets have nine configurable attributes, by using the attributes you can easily customize the widgets as you like.
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
Flutter Bottom Navigation Bar Animation Example App

Create new project:
flutter create flutter_curved_navigation_bar
Open the pubspec.yaml file and add this under the dependencies section.
name: flutter_curved_navigation_bar
description: A new Flutter project.
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
curved_navigation_bar: ^0.3.0 #latest version
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
main.dart
import 'package:curved_navigation_bar/curved_navigation_bar.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(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _page = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
items: <Widget>[
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
setState(() {
_page = index;
});
},
),
body: Container(
color: Colors.blueAccent,
child: Center(
child: Column(
children: <Widget>[
Text(_page.toString(), textScaleFactor: 10.0),
RaisedButton(
child: Text('Go To Page of index 1'),
onPressed: () {
//Page change using state does the same as clicking index 1 navigation button
final CurvedNavigationBarState navBarState =
_bottomNavigationKey.currentState;
navBarState.setPage(1);
},
),
],
),
),
),
);
}
}
flutter bottom navigation bar animation makes your app interface more attractive and a custom bottom navigation bar makes the flutter app more flexible.
Github Link: https://github.com/siddik12/flutter_curved_navigation_bar