sliding_clipped_nav_bar 1.0.0+5

Bottom Navigation Bar with sliding menu icon and text with clipping effect, also ripple effect when tapped.

sliding_clipped_nav_bar

Navigation bar inspired by Toolbar-icons-animation (designed by Cuberto).

Demo Screen Recording

Design Credit

Toolbar icons animation by Cuberto

Disclaimer

The bar height is taller than normal and might not be suitable for small devices. Also don't make the icon size too big or they will be clipped.

API reference

barItems → List<BarItem>

• List of bar items that shows horizontally.
  required

selectedIndex → int

• Selected index of the bar items.
  required

iconSize → double

• Size of all icons (inactive items), don't make it too big or will be clipped.
  optional [30]

activeColor → Color

• Color of the selected item which indicate selected.
  optional [const Color(0xFF01579B)]

inactiveColor → Color?

• Inactive color of item, which actually color icons.
  nullable

onButtonPressed → OnButtonPressCallback

• Callback when item is pressed.
  required

backgroundColor → Color

• background color of the bar.
  optional [Colors.white]

Suitable icon size

• FontAwesomeIcons: 24
• MaterialIcons: 30

Feel free to report issue even if you are using a another icon pack and see some problem.

Check the example app the implementation is pretty straightforward.

Please consider giving me star and see my other repositories. This will motivate me to keep working.

Follow me on social media

Instagram

Twitter