preview

convex_bottom_bar

Pub github Codemagic build status

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.

Example can be found at http://hacktons.cn/convex_bottom_bar
PS: Based on flutter-web and github-pages

Here are some supported style:

fixedreact
fixedCirclereactCircle
fliptitled
textIntab image
gradient backgoundTODO
...

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.4.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

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

AttributesDescription
backgroundColorAppBar background
gradientgradient will override backgroundColor
heightAppBar height
colortab icon/text color
activeColortab icon/text color when selected
curveSizesize of the convex shape
toptop edge of the convex shape relative to AppBar
stylestyle to describe the convex shape: fixed, fixedCircle, react, reactCircle, ...

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),
  )
);

FAQ

Contribution

Please file feature requests and bugs at the issue tracker.

Help

For more detail, please refer to the example project.

Libraries

convex_appbar