convex_bottom_bar 1.4.0 convex_bottom_bar: ^1.4.0 copied to clipboard
A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.
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.
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 |
flip | textIn |
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.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:
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 #
- Using an image instead of an icon for actionItem
- Is there anyway to remove elevation in the bottom bar?
Contribution #
Please file feature requests and bugs at the issue tracker.
Help #
For more detail, please refer to the example project.