Flutter Navigation Bar | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

Flutter Curved Navigation Bar

In Curved navigation, the tab bar is animated with animationCurve to indicate change in selected button or tab

To create curved navigation bar in Flutter, curved_navigation_bar package can be used

Creating new Flutter App

Check Flutter installation to setup Flutter

Use flutter create command to create a Flutter project (here curved_nav_app):

flutter create curved_nav_app

Dependency

Add curved_navigation_bar package to pubspec.yaml

dependencies:
    curved_navigation_bar: "^0.3.3"
    flutter:
        sdk: flutter

Run following command to add dependency
```
flutter pub get
```

Implementation

Import

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

Declare Curved Navigation bar as bottomNavigationBar of Scaffold

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),
)

Attributes:

items: List of Widgets
index: index of NavigationBar - to change current index or to set initial index
color: Color of NavigationBar, default Colors.white, to set the color
buttonBackgroundColor: to set background color of floating button, bydefault same as color
attributebackgroundColor: Color of NavigationBar’s background, default Colors
blueAccentonTap: Function handling taps on items, means it handles tap action
animationCurve: Curves interpolating button change animation, default Curves
easeOutCubicanimationDuration: to set duration of button change animation
height: To set the Height of NavigationBar, min 0.0, max 75.0

App Code

curved_nav_app/lib/main.dart

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

void main() => runApp(MaterialApp(home: CurvedNavWidget()));

class CurvedNavWidget extends StatefulWidget {

  @override
  CurvedNavWidgetState createState() => CurvedNavWidgetState();
}

class CurvedNavWidgetState extends State<CurvedNavWidget> {
  int page = 0;
  GlobalKey bottomNavigationKey = GlobalKey();

  @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: 300),
        onTap: (index) {
          setState(() {
            page = index;
          });
        },
      ),
      body: Container(
        color: Colors.blueAccent,
        child: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
              Text("Page text of index $page", textScaleFactor: 2.0),
              RaisedButton(
                child: Text('Go To Page of index 1'),
                onPressed: () {
                  final CurvedNavigationBarState navBarState =
                      bottomNavigationKey.currentState;
                  navBarState.setPage(1);
                },
              )
            ],
          ),
        ),
      )
    );
  }
}