Curved Bar Navigation In Flutter

Curved Bar Navigation In Flutter :

Screenshot :

1.main.dart

import 'package:flutter/material.dart';
import 'tabbar_animation.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,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: ''),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TabBarAnimation(),
    );
  }
}

2. tabbar_animation.dart

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

class TabBarAnimation extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BubblesState();
  }
}

class _BubblesState extends State<TabBarAnimation>
    with SingleTickerProviderStateMixin {
  final Color color = Colors.pink;
  int _page = 0;
  String tabNo = 'Add Tab';

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
            index: 0,
            height: 50,
            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.purple,
            animationCurve: Curves.easeInOut,
            animationDuration: Duration(milliseconds: 600),
            onTap: (index) {
              setState(() {
                _page = index;
                if (_page == 0) {
                  tabNo = 'Add Tab';
                } else if (_page == 1) {
                  tabNo = 'List Tab';
                } else if (_page == 2) {
                  tabNo = 'Exchange Tab';
                } else if (_page == 3) {
                  tabNo = 'Direction Tab';
                } else {
                  tabNo = 'Profile Tab';
                }
              });
            }),
        body: Container(
            color: Colors.purple,
            child: Stack(children: <Widget>[
              Center(
                  child: Column(children: <Widget>[
                SizedBox(
                  height: 100.0,
                ), // Margin

                Text('FlutterTutorial',
                    textScaleFactor: 4.0,
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                        fontStyle: FontStyle.normal,
                        fontWeight: FontWeight.bold,
                        shadows: <Shadow>[
                          Shadow(
                            offset: Offset(2.0, 2.0),
                            blurRadius: 3.0,
                            color: Color.fromARGB(255, 0, 0, 0),
                          ),
                          Shadow(
                            offset: Offset(2.0, 2.0),
                            blurRadius: 8.0,
                            color: Color.fromARGB(125, 0, 0, 255),
                          )
                        ])),

                Container(
                  color: Colors.white,
                  height: 2.0,
                  width: MediaQuery.of(context).size.width - 30,
                ),

                Container(
                    color: Colors.purple,
                    child: Center(
                        child: Text(tabNo,
                            textScaleFactor: 3.0,
                            style: TextStyle(
                                fontSize: 10,
                                color: Colors.white,
                                shadows: <Shadow>[
                                  Shadow(
                                    offset: Offset(2.0, 2.0),
                                    blurRadius: 3.0,
                                    color: Color.fromARGB(255, 0, 0, 0),
                                  ),
                                  Shadow(
                                    offset: Offset(2.0, 2.0),
                                    blurRadius: 8.0,
                                    color: Color.fromARGB(125, 0, 0, 255),
                                  )
                                ]))))
              ]))
            ])));
  }
}

3. pubspec.yaml

name: welcome
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  curved_navigation_bar:

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true