light_bottom_navigation_bar
current version: 0.0.1
Amazing powerful animated widget, it is useful for modern apps by displaying pro BottomNavigationBar with ViewPager.


Features
Animation
You can feel the animation with this package when tab is selected.
Configurable Widget
You can control any part of this widget backgroundColor , icons , size , type of animation , colors and more...
Strong build
The package is built with strong tests to make it trusted to developers
Beautiful UI
With this package you can make POWERFUL
UI.
Installing
Add this to your package's pubspec.yaml
file:
dependencies:
light_bottom_navigation_bar: latest_version
Then import it :
import 'package:light_bottom_navigation_bar/light_bottom_navigation_bar.dart';
More details see pub.dev.
Usage
The light_bottom_navigation_bar
package you can use it simply :
:warning:: The
items
value must beitems >= 1
.
:warning:: The
currentIndex
value must becurrentIndex >= 0 && currentIndex < items.length
.
Simple Design
Scaffold(
bottomNavigationBar: LightBottomNavigationBar(
currentIndex: 1,
items: [
LightBottomNavigationBarItem(),
LightBottomNavigationBarItem(),
LightBottomNavigationBarItem(),
],
onSelected: (index){
print('tab $index');
},
),
...........
);

Normal Design
Color primaryColor = Colors.yellowAccent;
........
Scaffold(
bottomNavigationBar: LightBottomNavigationBar(
currentIndex: 1,
items: [
LightBottomNavigationBarItem(
unSelectedIcon: Icons.home_outlined,
selectedIcon: Icons.home,
splashColor: primaryColor,
borderBottomColor: primaryColor,
backgroundShadowColor: primaryColor,
selectedIconColor: primaryColor,
unSelectedIconColor: Colors.grey
),
LightBottomNavigationBarItem(
unSelectedIcon: Icons.favorite_border,
selectedIcon: Icons.favorite,
splashColor: primaryColor,
borderBottomColor: primaryColor,
backgroundShadowColor: primaryColor,
selectedIconColor: primaryColor,
unSelectedIconColor: Colors.grey
),
LightBottomNavigationBarItem(
unSelectedIcon: Icons.cloud_done_outlined,
selectedIcon: Icons.cloud_done,
splashColor: primaryColor,
borderBottomColor: primaryColor,
backgroundShadowColor: primaryColor,
selectedIconColor: primaryColor,
unSelectedIconColor: Colors.grey
),
],
onSelected: (index){
print('tab $index');
},
),
...........
);

Super Design
Scaffold(
bottomNavigationBar: LightBottomNavigationBar(
currentIndex: 2,
items: makeNavItems(),
onSelected: (index){
print('tab $index');
},
),
.........
);
List<LightBottomNavigationBarItem> makeNavItems() {
return [
LightBottomNavigationBarItem(
unSelectedIcon: Icons.home_outlined,
selectedIcon: Icons.home_outlined,
size: 30,
backgroundShadowColor: Colors.red,
borderBottomColor: Colors.red,
borderBottomWidth: 3,
// highlightColor: Colors.red,
// hoverColor: ,
splashColor: Colors.red,
selectedIconColor: Colors.red,
unSelectedIconColor: Colors.red
),
LightBottomNavigationBarItem(
unSelectedIcon: Icons.search_outlined,
selectedIcon: Icons.search_outlined,
size: 30,
backgroundShadowColor: Colors.blue,
borderBottomColor: Colors.blue,
borderBottomWidth: 3,
// highlightColor: Colors.red,
// hoverColor: ,
splashColor: Colors.blue,
selectedIconColor: Colors.blue,
unSelectedIconColor: Colors.blue
),
LightBottomNavigationBarItem(
unSelectedIcon: Icons.star_border_outlined,
selectedIcon: Icons.star_border_outlined,
size: 30,
backgroundShadowColor: Colors.yellowAccent,
borderBottomColor: Colors.yellowAccent,
borderBottomWidth: 3,
// highlightColor: Colors.red,
// hoverColor: ,
splashColor: Colors.yellowAccent,
selectedIconColor: Colors.yellowAccent,
unSelectedIconColor: Colors.yellowAccent
),
LightBottomNavigationBarItem(
unSelectedIcon: Icons.done_outline_rounded,
selectedIcon: Icons.done_outline_rounded,
size: 30,
backgroundShadowColor: Colors.green,
borderBottomColor: Colors.green,
borderBottomWidth: 3,
// highlightColor: Colors.red,
// hoverColor: ,
splashColor: Colors.green,
selectedIconColor: Colors.green,
unSelectedIconColor: Colors.green
),
LightBottomNavigationBarItem(
unSelectedIcon: Icons.person_outline,
selectedIcon: Icons.person_outline,
size: 30,
backgroundShadowColor: Colors.purpleAccent,
borderBottomColor: Colors.purpleAccent,
borderBottomWidth: 3,
// highlightColor: Colors.red,
// hoverColor: ,
splashColor: Colors.purpleAccent,
selectedIconColor: Colors.purpleAccent,
unSelectedIconColor: Colors.purpleAccent
),
];
}

Widget Properties
LightBottomNavigationBar
items
List
list of LightBottomNavigationBarItem to show them in your BottomNavigationBar.
currentIndex
int
The tab to display.
height
double
Height of the BottomNavigationBar.
backgroundColor
Color
backgroundColor of BottomNavigationBar.
curve
Curve
The transition curve.
duration
Duration
The transition duration.
padding
EdgeInsets
The padding surrounding the entire widget , You can use to adding floating effect.
elevation
double
The elevation of the widget.
onSelected
ValueChanged
Callback method , Return the index of the tab that was tapping.