stylish_bottom_bar

Description:

stylish bottom bar

A collection of stylish bottom navigation bars like animated bottom bar and bubble bottom bar for flutter.
Table of contents #

Installing
How To Use
Showcase
Migrate to 1.0.0
Example

⭐ Installing #
dependencies:
stylish_bottom_bar: ^1.1.0
copied to clipboard
⚡ Import #
import 'package:stylish_bottom_bar/stylish_nav.dart';
copied to clipboard
📙 How To Use #
items:
option:
backgroundColor:
elevation:
currentIndex:
iconSize:
padding:
inkEffect:
inkColor:
onTap:
opacity:
borderRadius:
fabLocation:
hasNotch:
barAnimation:
barStyle:
unselectedIconColor:
bubbleFillStyle:
iconStyle:
selectedIcon:
dotStyle:
copied to clipboard
Properties #
items → List<BottomBarItem>
option → AnimatedBarOptions
option → BubbleBarOptions
option → DotBarOptions
backgroundColor → Color
elevation → double
currentIndex → int
iconSize → double
padding → EdgeInsets
inkEffect → bool
inkColor → Color
onTap → Function(int)
opacity → double
borderRadius → BorderRadius
fabLocation → StylishBarFabLocation
hasNotch → bool
barAnimation → BarAnimation
barStyle → BubbleBarStyle
unselectedIconColor → Color
bubbleFillStyle → BubbleFillStyle
iconStyle → IconStyle
dotStyle → DotStyle
copied to clipboard
BarStyle #
BubbleBarStyle.vertical
BubbleBarStyle.horizotnal
copied to clipboard
BubbleFillStyle #
BubbleFillStyle.fill
BubbleFillStyle.outlined
copied to clipboard
FabLocation #
StylishBarFabLocation.center
StylishBarFabLocation.end
copied to clipboard
BarAnimation #
BarAnimation.fade
BarAnimation.blink
BarAnimation.transform3D
BarAnimation.liquid
BarAnimation.drop
copied to clipboard
IconStyle #
IconStyle.Default
IconStyle.simple
IconStyle.animated
copied to clipboard
DotStyle #
DotStyle.circle
DotStyle.tile
copied to clipboard
NotchStyle #
NotchStyle.circle
NotchStyle.square
NotchStyle.themeDefault
copied to clipboard
Event #
onTap: (index){

}
copied to clipboard
Showcase #
AnimatedNavigationBar
IconStyle.Default




IconStyle.simple


IconStyle.animated




BarAnimation.fade



BarAnimation.blink


BarAnimation.liquid



BarAnimation.drop




DotNavigationBar
DotStyle.circle



DotStyle.tile


BubbleNavigationBar
BubbleBarStyle.horizotnal


BubbleFillStyle.outlined


BubbleBarStyle.vertical

BubbleFillStyle.outlined


Migrate to 1.0.0 #
List<dynamic> items is changed to List<BottomBarItem> items
From version 1.0.0 option: AnimatedBarOptions and BubbleBarOptions will be used to change the bar items type and properties.
Example #
StylishBottomBar(
// option: AnimatedBarOptions(
// iconSize: 32,
// barAnimation: BarAnimation.liquid,
// iconStyle: IconStyle.animated,
// opacity: 0.3,
// ),
// option: BubbleBarOptions(
// barStyle: BubbleBarStyle.horizotnal,
// // barStyle: BubbleBarStyle.vertical,
// bubbleFillStyle: BubbleFillStyle.fill,
// // bubbleFillStyle: BubbleFillStyle.outlined,
// opacity: 0.3,
// ),
option: DotBarOptions(
dotStyle: DotStyle.tile,
gradient: const LinearGradient(
colors: [
Colors.deepPurple,
Colors.pink,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
items: [
BottomBarItem(
icon: const Icon(Icons.abc),
title: const Text('Abc'),
backgroundColor: Colors.red,
selectedIcon: const Icon(Icons.read_more),
),
BottomBarItem(
icon: const Icon(Icons.safety_divider),
title: const Text('Safety'),
backgroundColor: Colors.orange,
),
BottomBarItem(
icon: const Icon(Icons.cabin),
title: const Text('Cabin'),
backgroundColor: Colors.purple,
),
],
fabLocation: StylishBarFabLocation.end,
hasNotch: true,
currentIndex: selected,
onTap: (index) {
setState(() {
selected = index;
controller.jumpToPage(index);
});
},
)

copied to clipboard
Contributions and pull requests are welcome! We value your input and appreciate any improvements or suggestions you can provide. Feel free to submit a pull request with your changes. Don't forget to star the repository if you find it useful. Thank you for your collaboration!