convex_bottom_bar 2.1.0-beta+1

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

[preview]

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.

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 :

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

Table of contents

• Badge

• Theming

• Custom Example

• Contribution

• Help

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.

FAQ

• Change active tab index programmaticlly
• 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.