Description:

top notch bottom bar

TopNotchBottomBar #
A beautiful and animated bottom navigation bar. also you are free to customize it way you want.
Preview #



Customization #
TopNotchBottomBar #
Required

items - navigation items, required more than one item and less than six
onTap - listen when a item is tapped it provide the selected item's index

Optional

backgroundColor - the navigation bar's background color
height - changes the bottom bar height
iconSize - the item icon's size
showLabel - the item's text
activeColor - the item selected color
inActiveColor - the item unselected color
showElevation - if false the bottom bar elevation will be removed
animationDuration - time duration for the notch and text animation
initialIndex - set initial selected item
showCurvedBar - if false the bottom bar curve will be removed
showCurvedBarAnimation - if false the bottom bar curve animation will be removed

TopNotchItem #
Required

icon - the icon of this item
name - the text under the icon

Optional

color - item color

Getting Started #
Add the dependency in pubspec.yaml:
dependencies:
top_notch_bottom_bar: ^0.1.0
copied to clipboard
Basic Usage #
Adding the widget
class _HomePageState extends State<HomePage> {
static const TextStyle txtstyle = TextStyle(fontSize: 30);

List<Widget> screens = [
const Center(child: Text('Home', style: txtstyle)),
const Center(child: Text('Favourite', style: txtstyle)),
const Center(child: Text('Messages', style: txtstyle)),
const Center(child: Text('Settings', style: txtstyle)),
];

int index = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Top Notch Bottom Bar')),
body: screens[index],
bottomNavigationBar: TopNotchBottomBar(
height: 56, // changes the bottom bar height -> default = 50
onTap: ((value) => setState(() {
index = value;
})),
items: [
TopNotchItem(icon: const Icon(Icons.home), name: 'Home'),
TopNotchItem(icon: const Icon(Icons.favorite), name: 'Favourite'),
TopNotchItem(icon: const Icon(Icons.message), name: 'Messages'),
TopNotchItem(icon: const Icon(Icons.settings), name: 'Settings'),
]),
);
}
}
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter