abbasnazari-0/super_bottom_navigation_bar

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

super_bottom_navigation_bar

Amazing powerful animated widget, it is useful for modern apps by displaying pro BottomNavigationBar with ViewPager.

Add Super BottomNavigationBar => Better UI/UX.

Do you like circles ? see super_circle

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:
  super_bottom_navigation_bar: latest_version

Then import it :

import 'package:super_bottom_navigation_bar/super_bottom_navigation_bar.dart';

More details see pub.dev.

Usage

The super_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: SuperBottomNavigationBar(
                currentIndex: 1,
                items: [
                  SuperBottomNavigationBarItem(),
                  SuperBottomNavigationBarItem(),
                  SuperBottomNavigationBarItem(),
                ],
                onSelected: (index){
                  print('tab $index');
                },
              ),
      ...........
          );

Normal Design

      Color primaryColor = Colors.yellowAccent;
      ........
      Scaffold(
              bottomNavigationBar: SuperBottomNavigationBar(
                currentIndex: 1,
                items: [
                  SuperBottomNavigationBarItem(
                    unSelectedIcon: Icons.home_outlined,
                    selectedIcon: Icons.home,
                    splashColor: primaryColor,
                    borderBottomColor: primaryColor,
                    backgroundShadowColor: primaryColor,
                    selectedIconColor: primaryColor,
                    unSelectedIconColor: Colors.grey
                  ),
                  SuperBottomNavigationBarItem(
                      unSelectedIcon: Icons.favorite_border,
                      selectedIcon: Icons.favorite,
                      splashColor: primaryColor,
                      borderBottomColor: primaryColor,
                      backgroundShadowColor: primaryColor,
                      selectedIconColor: primaryColor,
                      unSelectedIconColor: Colors.grey
                  ),
                  SuperBottomNavigationBarItem(
                      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: SuperBottomNavigationBar(
                currentIndex: 2,
                items: makeNavItems(),
                onSelected: (index){
                  print('tab $index');
                },
              ),
         .........
          );
      
      
      List<SuperBottomNavigationBarItem> makeNavItems() {
         return [
               SuperBottomNavigationBarItem(
                 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
               ),
               SuperBottomNavigationBarItem(
                   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
               ),
               SuperBottomNavigationBarItem(
                   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
               ),
               SuperBottomNavigationBarItem(
                   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
               ),
               SuperBottomNavigationBarItem(
                   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

SuperBottomNavigationBar

items

List (required)

list of SuperBottomNavigationBarItem 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.

---