3D Bottom Navigation Bar in Flutter

App navigation is a important parts of a each app development. there are lot of external packages are available to create different type of app navigation for different purposes. Today iam going to share a awesome package for creating app bottom navigation menu easy and simple .The following package is originally created by Dannniel in Dribbble and follow below tutorial for implement the same in flutter.

Installing

Add following to your package’s pubspec.yaml file:

dependencies:
  flip_box_bar: ^0.9.2

After save the flip_box_bar packages are automatically downloaded and included into your project.

Import It

The next step import this library to your dart file. for that you can use following syntax .

import 'package:flip_box_bar/flip_box_bar.dart';

Using following Code to render bottom menu.

 bottomNavigationBar: FlipBoxBar(
        selectedIndex: currentIndex,
        items: [
          FlipBarItem(
              icon: Icon(Icons.home),
              text: Text("Home"),
              frontColor: Colors.green,
              backColor: Colors.greenAccent),
          FlipBarItem(
              icon: Icon(Icons.fastfood),
              text: Text("Orders"),
              frontColor: Colors.orange,
              backColor: Colors.orangeAccent)
        ],
        onIndexChanged: (indx) {
          setState(() {
            currentIndex = indx;
          });
        }
)

API Use

List<FlipBarItem>	Create List of menus :-The items to be displayed in the bottom nav menu.
animationDuration	Duration of a animation
onIndexChanged()	function()-> Its fire when index value changed
navBarHeight	Height of a nav bar
icon	Specify Icon of a menu item
text	Title of a menu item
frontColor	Font color of a menu item
backColor	Background color of a Item

Full Code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.lightGreen,
        canvasColor: Colors.purple.shade100,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(),
      bottomNavigationBar: FlipBoxBar(
        selectedIndex: currentIndex,
        items: [
          FlipBarItem(
              icon: Icon(Icons.home),
              text: Text("Home"),
              frontColor: Colors.green,
              backColor: Colors.greenAccent),
          FlipBarItem(
              icon: Icon(Icons.fastfood),
              text: Text("Orders"),
              frontColor: Colors.orange,
              backColor: Colors.orangeAccent),
          FlipBarItem(
              icon: Icon(Icons.verified_user),
              text: Text("Users"),
              frontColor: Colors.yellow,
              backColor: Colors.yellowAccent),
        ],
        onIndexChanged: (indx) {
          setState(() {
            currentIndex = indx;
          });
        },
      ),
    );
  }
}

Demo