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:

CurvedNavigationBar

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() =&gt; _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() =&gt; _IdentityPageState();
}

class _IdentityPageState extends State  {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('Identity'),
      ),
    );
  }
}
  • How to Get SHA1 key in Flutter|SHA-256 Flutter Firebase
    How to Get SHA1 key in Flutter for firebase | SHA-1 or SHA-256 key generate Flutter firebase tutorials. SHA-1 Fingerprint Certificate
  • Animated Default Text Style Flutter – Widget Tutorial
    Animated Default text style for flutter. Flutter Text Animation:- AnimatedDefalutTextStyle() Code Example: Text Animation: Flutter Animation Code Example: READ ALSO …  How to Scroll Flutter Text or widget
  • How to Create Scrollable Flutter Table | DataTable
    You Can Create easily Flutter Table with this DataTable() Widget. Then You need columns and rows for the table. columns called DataColumn() and rows called DataRow(). DataColumn() insert label set Value and DataRow() insert DataCell() set Value. DataTable() Code Example: How To Create Flutter DataTable: READ ALSO …  Flutter Tween Animation Example | Flutter Animation
  • How to set Flutter Orientation Portrait Or Landscape Only
    If you want to set Fixed Flutter Orientation for your application You need import first service. Code Example: Some Value For Device Orientation : Orientation Project Code Example: Flutter Orientation Portrait Or Landscape Only READ ALSO …  Top 5 Flutter Shortcuts for Android Studio
  • 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: Widget CarvedNavigationBar: CurvedNavigationBar Flutter Tutorial: Now Sharing this tutorial full project code CurvedNavigationBar. You can use this coding for practice. When …

    Read more …

Leave a Comment