convex_bottom_bar 1.2.0
convex_bottom_bar: ^1.2.0 copied to clipboard

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

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.

Screenshot

Install Demo app-release.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: ^0.0.1
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: TAB_ITEMS,
    onTap: (int i) => setState(() {
      _selectedIndex = i;
    }),
    actionItem: const TabItem(icon: Icons.add, title: "Publish"),
    onTapActionButton: () => setState(() {
      _selectedIndex = -1;
    }),
  ),
);

Table of contents #

Theming #

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

AttributesDescription
backgroundColorAppBar background
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

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.

Here is a custom sample: custom preview

Scaffold(
  bottomNavigationBar: ConvexAppBar.builder(
    count: items.length,
    backgroundColor: _tabBackgroundColor,
    tabBuilder: (BuildContext context, int index, bool active) {
      var navigationItem = items[index];
      var _color = active ? Colors.white : Colors.white60;
      var _icon = active
          ? navigationItem.activeIcon ?? navigationItem.icon
          : navigationItem.icon;
      return Container(
        color: Colors.transparent,
        padding: EdgeInsets.only(bottom: 2),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(_icon, color: _color),
            Text(navigationItem.title, style: TextStyle(color: _color))
          ],
        ),
      );
    },
    actionBuilder: (BuildContext context, int index, bool active) {
      var _color = active ? Colors.white : Colors.white60;
      return Stack(
        alignment: Alignment.center,
        children: <Widget>[
          SizedBox(
            width: 60,
            height: 60,
            child: Container(
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: _color),
              child: Icon(
                Icons.add,
                size: 40,
                color: _tabBackgroundColor,
              ),
            ),
          )
        ],
      );
    },
  ),
);

Contribution #

Please file feature requests and bugs at the issue tracker.

Help #

For more detail, please refer to the example project.

1014
likes
100
pub points
96%
popularity

Publisher

hacktons.cn

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on convex_bottom_bar