Animated CurvedNavigationBar Flutter Tutorial

Flutter CurvedNavigationBar

In This Tutorial, you can learn how to design CurvedNavigationBar to use in your flutter project. With the carved navigation Bar Flutter package using you can modify your navigation Bar.

Import CarvedNavigationBar:

curved_navigation_bar: ^1.0.1

Widget CarvedNavigationBar:

CurvedNavigationBar(
        backgroundColor: Colors.transparent,
        key: _NavKey,
        items: [
          Icon(Icons.home),
          Icon(Icons.message_outlined),
          Icon(Icons.favorite),
          Icon(Icons.perm_contact_cal_rounded)
        ],
          buttonBackgroundColor: Colors.white,
        onTap: (index){
          setState(() {
           // onTap
          });
        },
             animationCurve: Curves.fastLinearToSlowEaseIn, color: Colors.orange,
      ),

CurvedNavigationBar Flutter Tutorial:

Now Sharing this tutorial full project code CurvedNavigationBar. You can use this coding for practice. When the user clicks your CurvedNavigationBar then show each button for a single page show. CurvedNavigationBar Example:

main.dart

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_project/FavoritePage.dart';
import 'package:flutter_project/HomePage.dart';
import 'package:flutter_project/IdentityPage.dart';
import 'package:flutter_project/MessagePage.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State {

  GlobalKey _NavKey = GlobalKey();

  var PagesAll = [HomePage(),MessagePage(),FavoritePage(),IdentityPage()];

  var myindex =0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.transparent,
        key: _NavKey,
        items: [
          Icon((myindex == 0) ? Icons.home_outlined : Icons.home),
          Icon((myindex == 1) ? Icons.message : Icons.message_outlined),
          Icon((myindex == 2) ? Icons.favorite_border : Icons.favorite),
          Icon((myindex == 3) ? Icons.perm_identity : Icons.perm_contact_cal_rounded)
        ],
          buttonBackgroundColor: Colors.white,
        onTap: (index){
          setState(() {
            myindex = index;
          });
        },
             animationCurve: Curves.fastLinearToSlowEaseIn, color: Colors.orange,
      ),
      body: PagesAll[myindex],
    );
  }
}

HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _IdentityPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('Home'),
      ),
    );
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>MessagePage.dart</h2>
<!-- /wp:heading -->

<!-- wp:code {""lineNumbers"":true} -->
<pre class=""wp-block-code""><code lang=""dart"" class=""language-dart line-numbers"">import 'package:flutter/material.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({Key? key}) : super(key: key);

  @override
  _IdentityPageState createState() =&gt; _IdentityPageState();
}

class _IdentityPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('Message'),
      ),
    );
  }
}

FavoritePage.dart

import 'package:flutter/material.dart';

class FavoritePage extends StatefulWidget {
  const FavoritePage({Key? key}) : super(key: key);

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

class _IdentityPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('Favorite'),
      ),
    );
  }
}

IndentityPage.dart

import 'package:flutter/material.dart';

class IdentityPage extends StatefulWidget {
  const IdentityPage({Key? key}) : super(key: key);

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

class _IdentityPageState extends State  {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('Identity'),
      ),
    );
  }
}