curved_navigation_bar_with_label 2.1.4

Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration, with label.

example/lib/main.dart

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

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

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 76.0,
        items: [
          CurvedNavigationBarItem(
              icon: Icon(Icons.add, size: 30), label: "Add"),
          CurvedNavigationBarItem(
              icon: Icon(Icons.list, size: 30), label: "List"),
          CurvedNavigationBarItem(
              icon: Icon(Icons.compare_arrows, size: 30), label: "Compare"),
          CurvedNavigationBarItem(
              icon: Icon(Icons.call_split, size: 30), label: "Split"),
          CurvedNavigationBarItem(
              icon: Icon(Icons.perm_identity, size: 30), label: "User"),
        ],
        backgroundColor: Colors.blueAccent,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
        letIndexChange: (index) => true,
      ),
      body: Container(
        color: Colors.blueAccent,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_page.toString(), textScaleFactor: 10.0),
              ElevatedButton(
                child: Text('Go To Page of index 1'),
                onPressed: () {
                  final CurvedNavigationBarState? navBarState =
                      _bottomNavigationKey.currentState;
                  navBarState?.setPage(1);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}