large Flutter Favorite logosmall Flutter Favorite logo

convex_bottom_bar 3.2.0 icon indicating copy to clipboard operation
convex_bottom_bar: ^3.2.0 copied to clipboard

A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.

appBar preview github coverage status likes build status license

English | 简体中文

The official BottomAppBar can only display a notch FAB with an app bar, and sometimes we need a convex FAB. BottomAppBar and NotchShape's implementation inspires this ConvexAppBar.

Online example can be found at

convex_bottom_bar is now a Flutter Favorite package!

Here are some supported style:

fixed react badge chip
fixedCircle reactCircle flip
textIn titled tab image
button fixed corner

How to use #

Typically ConvexAppBar can work with Scaffold by setup its bottomNavigationBar.

The ConvexAppBar has two constructors. The ConvexAppBar() will use the default style to simplify the tab creation.

Add this to your package's pubspec.yaml file, use the latest version Pub:

  convex_bottom_bar: ^latest_version
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon:, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    onTap: (int i) => print('click index=$i'),

Flutter Version Support
As Flutter is developing fast. There can be breaking changes. We will be trying to support the stable version and beta version through different package versions.

Stable Flutter Version Package Version More
>=1.20 >=2.4.0 Since v1.20, the stable version changed the Stack api
<1.20 <=2.3.0 Support for stable version such as v1.17, v1.12 is not going to be updated

Features #

  • Provide multiple internal styles
  • Ability to change the theme of AppBar
  • Provide builder API to customize a new style
  • Add badge on the tab menu
  • Elegant transition animation
  • Provide hook API to override some of the internal styles
  • RTL support

Table of contents #

Theming #

The bar will use default style, you may want to theme it. Here are some supported attributes:

Attributes Description
backgroundColor AppBar background
gradient gradient will override backgroundColor
height AppBar height
color tab icon/text color
activeColor tab icon/text color when selected
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; Only work with fixed tab style
style style to describe the convex shape: fixed, fixedCircle, react, reactCircle, ...
chipBuilder custom badge builder, use ConvexAppBar.badge for default badge

Badge #

If you need to add a badge on the tab, use the ConvexAppBar.badge to get it done.

badge demo

ConvexAppBar.badge({0: '99+', 1: Icons.assistant_photo, 2: Colors.redAccent},
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon:, title: 'Discovery'),
    TabItem(icon: Icons.add, title: 'Add'),
  onTap: (int i) => print('click index=$i'),

The badge() method accepts an array of badges; The badges is a map with tab items. Each value of entry can be either String, IconData, Color or Widget.

Single Button #

If you only need a single button, checkout the ConvexButton.


  appBar: AppBar(title: const Text('ConvexButton Example')),
  body: Center(child: Text('count $count')),
  bottomNavigationBar: ConvexButton.fab(
    onTap: () => setState(() => count++),

Style Hook #

Hook for internal tab style. Unlike the ConvexAppBar.builder, you may want to update the tab style without defining a new tab style.

This hook is limited and can lead to overflow broken if the size you provide does not match with internal style.

  style: Style(),
  child: ConvexAppBar(
    initialActiveIndex: 1,
    height: 50,
    top: -30,
    curveSize: 100,
    style: TabStyle.fixedCircle,
    items: [
      TabItem(icon: Icons.import_contacts),
      TabItem(title: "2020", icon:,
    backgroundColor: _tabBackgroundColor,
class Style extends StyleHook {
  double get activeIconSize => 40;

  double get activeIconMargin => 10;

  double get iconSize => 20;

  TextStyle textStyle(Color color) {
    return TextStyle(fontSize: 20, color: color);

RTL Support #

RTL is supported internally, and if you define the TextDirection inside the app, the AppBar should work fine. Both RTL and LTR can be configured through Directionality:

  textDirection: TextDirection.rtl,
  child: Scaffold(body:ConvexAppBar(/*TODO ...*/)),

Custom Example #

If the default style does not match your situation, try with ConvexAppBar.builder(), allowing you to custom nearly all the tab features.

  bottomNavigationBar: ConvexAppBar.builder(
    count: 5,
    itemBuilder: Builder(),

// user defined class
class Builder extends DelegateBuilder {
  Widget build(BuildContext context, int index, bool active) {
    return Text('TAB $index');

Full custom example can be found at example.


Please file feature requests and bugs at the issue tracker.

You like the package ? Buy me a coffee :)


pub points


verified publisher

A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.

Repository (GitHub)


API reference


Icon for licenses.Apache-2.0 (LICENSE)




Packages that depend on convex_bottom_bar