Flip Box Bar

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

      // 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;
                }
              },
            ),

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.

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:

        // 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);
              },
            ),