A 3D Bottom Navigation Bar in Flutter
Clone or download
Latest commit fa5598a Dec 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android 0.1.1 release and fixes. Dec 12, 2018
example/lib Added docs and fixed onIndexChanged bug. Release 0.2.0 Dec 13, 2018
lib 0.2.0 release. Dec 13, 2018
test Initial commit Dec 12, 2018
.gitignore Initial commit Dec 12, 2018
.metadata Initial commit Dec 12, 2018
CHANGELOG.md 0.2.0 release. Dec 13, 2018
LICENSE Initial commit Dec 12, 2018
README.md Added docs to readme Dec 13, 2018
demo.gif Initial commit Dec 12, 2018
flip_box_bar.iml Initial commit Dec 12, 2018
pubspec.lock Initial commit Dec 12, 2018
pubspec.yaml Added docs and fixed onIndexChanged bug. Release 0.2.0 Dec 13, 2018

README.md

flip_box_bar

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel [https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction].

Demo

Example Use

  // In Scaffold
  bottomNavigationBar: FlipBoxBar(
          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);
          },
        ),

Properties

List<FlipBarItem> items;

The items to be displayed in the BottomNavBar.

Duration animationDuration;

The duration of the animation of the box flip.

ValueChanged<int> onIndexChanged;

Callback for getting value of item selection.

int initialIndex;

The initial selected index of the BottomNavBar.

double navBarHeight;

The height of the BottomNavBar.