convex_bottom_bar 0.0.1
convex_bottom_bar: ^0.0.1 copied to clipboard

A Flutter package implements a convex BottomAppBar

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.

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.

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

Thanks to the GFW, this project is not published yet. Add dependence as bellow:

dependencies:
  convex_bottom_bar:
    git:
      url: https://github.com/hacktons/convex_bottom_bar.git
      ref: 1.0.0

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
90
pub points
96%
popularity

Publisher

hacktons.cn

A Flutter package implements a convex BottomAppBar

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on convex_bottom_bar