fancy_bottom_bar

A different take on your standard bottom app bar. Inspired by https://dribbble.com/shots/6957731-Reader-app-tab-bar

FancyBottomBar

Demo Gif

Getting Started

Add the plugin:

dependencies:
  ...
  fancy_bottom_bar: ^0.0.1

Basic Usage

Adding the widget to a Scaffold

bottomNavigationBar: FancyBottomBar(
     items: [
              FancyBottomItem(title: Text("Home"), icon: Icon(Icons.home)),
              FancyBottomItem(title: Text("Connect"), icon: Icon(Icons.usb)),
              FancyBottomItem(title: Text("Profile"), icon: Icon(Icons.person))
    ],
    onItemSelected: (i) => setState(() => selectedPos = i),
    selectedPosition: selectedPos,
)

FancyBottomBar

required

items -> List of FancyBottomItem objects<br/> onItemSelected -> Function to handle a tap selection change, receives an int<br/> selectedPosition -> The currently selected position<br/>

optional

height -> The height of the FancyBottomBar, defaults to 64<br/> elevation -> The elevation for the FancyBottomBar, defaults to 8<br/> bgColor -> The bottom app bar's background color, defaults to theTheme's bottomAppBarColor<br/> indicatorColor -> The tiny circle indicator color, defaults to Colors.black<br/> selectedColor -> The pulsing circle's color, defaults to theTheme's accentColor<br/>

FancyBottomItem

title -> The widget to be used as the Title for this tab, usually a Text Widget<br/> icon -> The widget to be used as the Icon for this tab, usually an Icon Widget<br/>

Contributing

Contributions are always welcome, feel free to open a PR.

License

Libraries

fancy_bottom_bar
fancy_bottom_item
fancy_item
tap_ring