light_bottom_navigation_bar 0.0.3 copy "light_bottom_navigation_bar: ^0.0.3" to clipboard
light_bottom_navigation_bar: ^0.0.3 copied to clipboard

Amazing animated powerful BottomNavigationBar widget , you can use it in your pro apps to improve UI/UX.

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.

pub license repo_size

demo photo

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 :

⚠️: The items value must be items >= 1.

⚠️: The currentIndex value must be currentIndex >= 0 && currentIndex < items.length.

Simple Design

      Scaffold(
              bottomNavigationBar: LightBottomNavigationBar(
                currentIndex: 1,
                items: [
                  LightBottomNavigationBarItem(),
                  LightBottomNavigationBarItem(),
                  LightBottomNavigationBarItem(),
                ],
                onSelected: (index){
                  print('tab $index');
                },
              ),
      ...........
          );
simple_design

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

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
               ),
             ];
      }
super_design

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.


10
likes
150
pub points
65%
popularity

Publisher

unverified uploader

Amazing animated powerful BottomNavigationBar widget , you can use it in your pro apps to improve UI/UX.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on light_bottom_navigation_bar