convex_bottom_bar 1.3.1+1 copy "convex_bottom_bar: ^1.3.1+1" to clipboard
convex_bottom_bar: ^1.3.1+1 copied to clipboard

outdated

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

preview

Language: English | 中文简体

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:

fixed react
fixedCircle reactCircle
gradient backgound tab image

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 #

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

2538
likes
0
pub points
98%
popularity

Publisher

verified publisherhacktons.cn

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

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on convex_bottom_bar