Implementing a Convex Bottom Navigation Bar in Flutter

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
• Save development hrs by providing Transition Animation and RTL support

The bar will use a default style and you can use below attributes to create your own navigation bar styles.

Colors

• backgroundColor — AppBar background
• gradient — will override backgroundColor
• color — tab icon/text color
• activeColor — tab icon/text color when selected

Other

• height — AppBar height
• curveSize — size of the convex shape
• top — top edge of the convex shape relative to AppBar
• cornerRadius — draw the background with topLeft and topRight corner for Fixed tab style
• style — style to describe the convex, ex:- fixed, fixedCircle, react, reactCircle, …
• chipBuilder — custom badge builder…