convex_bottom_bar 2.2.0 copy "convex_bottom_bar: ^2.2.0" to clipboard
convex_bottom_bar: ^2.2.0 copied to clipboard

outdated

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

preview

Languages: English|简体中文

convex_bottom_bar #

Pub github Codemagic build status Coverage Status

convex_bottom_bar is now a Flutter Favorite package!

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.

Online example can be found at https://appbar.codemagic.app.

Here are some supported style:

fixed react
fixedCircle reactCircle
flip titled
textIn tab image
gradient backgound badge chip

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 Pub:

dependencies:
  convex_bottom_bar: ^latest_version
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

Features #

  • Provide multiple internal styles
  • Ability to change the theme of AppBar
  • Provide builder API to customize new style
  • Add badge on tab menu
  • Elegant transition animation
  • Provide hook API to override some of internal styles

Table of contents #

Badge #

If you need to add badge on the tab, use ConvexAppBar.badge to get it done.

badge demo

ConvexAppBar.badge({0: '99+', 1: Icons.assistant_photo, 2: Colors.redAccent},
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.map, title: 'Discovery'),
    TabItem(icon: Icons.add, title: 'Add'),
  ],
  onTap: (int i) => print('click index=$i'),
);

The badge() method accept an array of badges; The badges is map with tab items, each value of entry can be either String, IconData, Color or Widget.

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, ...
chipBuilder custom badge builder, use ConvexAppBar.badge for default badge

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: 5,
    backgroundColor: Colors.blue,
    style: TabStyle.fixed,
    itemBuilder: Builder(),
  )
);

/*user defined class*/
class Builder extends DelegateBuilder {
  @override
  Widget build(BuildContext context, int index, bool active) {
    return Text('TAB $index');
  }
}

Full custom example can be found at example.

Style Hook #

Hook for internal tab style. Unlike the ConvexAppBar.builder, you may want to update the tab style without define a new tab style.

Warning:
This hook is limited, and can lead to overflow broken if the size you provide does no match with internal style.

StyleProvider(
  style: Style(),
  child: ConvexAppBar(
    initialActiveIndex: 1,
    height: 50,
    top: -30,
    curveSize: 100,
    style: TabStyle.fixedCircle,
    items: [
      TabItem(icon: Icons.link),
      TabItem(icon: Icons.import_contacts),
      TabItem(title: "2020", icon: Icons.work),
    ],
    backgroundColor: _tabBackgroundColor,
  ),
)
class Style extends StyleHook {
  @override
  double get activeIconSize => 40;

  @override
  double get activeIconMargin => 10;

  @override
  double get iconSize => 20;

  @override
  TextStyle textStyle(Color color) {
    return TextStyle(fontSize: 20, color: color);
  }
}

FAQ #

Contribution #

Please file feature requests and bugs at the issue tracker.

2539
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