[preview]

Language: English | 中文简体

convex_bottom_bar #

The official BottomAppBar can only display a notch FAB with app bar, sometimes we need a convex FAB. This ConvexAppBar is inspired by BottomAppBar and NotchShape's implementation.

There are some supported tab style:

Install Demo app-release-arm64.apk

How to use #

Typically ConvexAppBar can work with Scaffold by setup its bottomNavigationBar.

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

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

dependencies:
  convex_bottom_bar: ^1.3.0

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: TAB_ITEMS,
    style: _style.value,
    curve: _curve.value,
    backgroundColor: _babColor,
    onTap: (int i) => setState(() {
      _selectedIndex = i;
    }),
  )
);

Table of contents #

• Theming

• Custom Example

• Contribution

• Help

Theming #

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

[]

[]

Custom Example #

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

Scaffold(
  bottomNavigationBar: ConvexAppBar.builder(
    count: items.length,
    backgroundColor: _tabBackgroundColor,
    style: TabStyle.fixed,
    builder: _CustomBuilder(items, _tabBackgroundColor),
  )
);

Contribution #

Please file feature requests and bugs at the issue tracker.

Help #

For more detail, please refer to the example project.