https://github.com/deven98/flip_box_bar

A 3D Bottom Navigation Bar in Flutter
https://github.com/deven98/flip_box_bar

flutter flutter-package flutter-plugin

Last synced: about 1 month ago
JSON representation

A 3D Bottom Navigation Bar in Flutter

• Host: GitHub
• URL: https://github.com/deven98/flip_box_bar
• Owner: deven98
• License: bsd-2-clause
• Created: 2018-12-12T16:00:46.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-10-04T13:59:17.000Z (about 5 years ago)
• Last Synced: 2024-04-24T06:16:54.108Z (7 months ago)
• Topics: flutter, flutter-package, flutter-plugin
• Language: Dart
• Size: 718 KB
• Stars: 261
• Watchers: 10
• Forks: 46
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# flip_box_bar

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel

[https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction].

# Demo

![](https://github.com/deven98/flip_box_bar/blob/master/demo.gif)

# Example Use

```dart

      // In Scaffold

      int selectedIndex = 0;

      

      bottomNavigationBar: FlipBoxBar(

              selectedIndex: index,

              items: [

                FlipBarItem(icon: Icon(Icons.map), text: Text("Map"), frontColor: Colors.blue, backColor: Colors.blueAccent),

                FlipBarItem(icon: Icon(Icons.add), text: Text("Add"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),

                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text("Read"), frontColor: Colors.orange, backColor: Colors.orangeAccent),

                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.purple, backColor: Colors.purpleAccent),

                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.pink, backColor: Colors.pinkAccent),

              ],

              onIndexChanged: (newIndex) {

                setState() {

                    selectedIndex = newIndex;

                }

              },

            ),

```     

# Properties

### List\ items;

The items to be displayed in the BottomNavBar.

### Duration animationDuration;

The duration of the animation of the box flip.

### ValueChanged\ onIndexChanged;

Callback for getting value of item selection.

### int initialIndex;

The initial selected index of the BottomNavBar.

### double navBarHeight;

The height of the BottomNavBar.

# Note: Breaking change

Prior to 0.9.0, only initialIndex was provided as a parameter. 0.9.0 onwards, user needs to

modify the selectedIndex property and rebuild to animate. The reason for this modification is that

it allows programmatically changing the selected index whereas the earlier version did not.

### A version of the code before 0.9.0 would look like this:

```dart

        // In Scaffold

      

      bottomNavigationBar: FlipBoxBar(

              initialIndex: 0,

              items: [

                FlipBarItem(icon: Icon(Icons.map), text: Text("Map"), frontColor: Colors.blue, backColor: Colors.blueAccent),

                FlipBarItem(icon: Icon(Icons.add), text: Text("Add"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),

                FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text("Read"), frontColor: Colors.orange, backColor: Colors.orangeAccent),

                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.purple, backColor: Colors.purpleAccent),

                FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.pink, backColor: Colors.pinkAccent),

              ],

              onIndexChanged: (newIndex) {

                print(newIndex);

              },

            ),

```