flip_box_bar 0.9.2

Flutter Android iOS web

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel

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
  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<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.

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: #

    // 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);
          },
        ),
20
likes
110
pub points
73%
popularity

Publisher

joshi.dev

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel

Homepage

Documentation

API reference

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on flip_box_bar