Implementing a Convex Bottom Navigation Bar in Flutter

Maneesha Erandi
4 min readJan 24, 2023

convex_bottom_bar flutter package makes creating a convex bottom navigation bar really easy. This package also earned it’s place among Flutter Favorites.

Since Flutter — default bottom navigation widget does not offer this type of style, this package is a good option where we need to implement a convex bar.

Convex Bar can be provided to the bottomNavigationBar param of the Scaffold. In simple scenarios ConvexAppBar() will be used.

If you need a different convex app bar than this package has provided, you can check how far you can customize this, by referring to the package read me and their example demo apps.

Some Supported Styles

  • Fixed, Fixed Circle, Fixed corner
  • React, React Circle
  • Badge Chip
  • Flip
  • TextIn
  • Titled
  • Tab Image
  • Button

What’s Special

  • Provide multiple internal styles with builder API to customize a new style and hook API to override some internal styles
  • We can change the theme of the app bar
  • Adding a badge to the item made really easy