stylish_bottom_bar 0.0.3

A collection of stylish bottom navigation bar like animated bottom bar and bubble bottom bar for flutter.

A collection of stylish bottom navigation bar like animated bottom bar and bubble bottom bar for flutter.

⭐ Installing

dependencies:
    stylish_bottom_bar: ^0.0.3

⚡ Import

import 'package:stylish_bottom_bar/stylish_nav.dart';

📙 How To Use

items:
backgroundColor:
elevation:
currentIndex:
iconSize:
padding:
inkEffect:
inkColor:
onTap:
opacity:
borderRadius:
fabLocation:
hasNotch:
barAnimation:
barStyle:
unselectedIconColor:

Properties

items → List<AnimatedBarItems>
items → List<BubbleBarItem>
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

BarStyle

BubbleBarStyle.vertical
BubbleBarStyle.horizotnal

FabLocation

StylishBarFabLocation.center
StylishBarFabLocation.end

BarAnimation

BarAnimation.fade
BarAnimation.blink
BarAnimation.transform3D

Event

onTap: (index){
    
}

Examples

AnimatedNavigationBar

BarAnimation.fade

BarAnimation.blink

AnimatedNavigationBar(
    items: [
        AnimatedBarItems(
            icon: Icon(
                Icons.home,
            ),
            selectedColor: Colors.deepPurple,
            backgroundColor: Colors.amber,
            title: Text('Home'),
        ),
        AnimatedBarItems(
            icon: Icon(
                Icons.add_circle_outline,
            ),
            selectedColor: Colors.green,
            backgroundColor: Colors.amber,
            title: Text('Add'),
        ),
    ],
    fabLocation: StylishBarFabLocation.end,
    hasNotch: false,
    iconSize: 32,
    barAnimation: BarAnimation.fade,
    //barAnimation: BarAnimation.blink,
    opacity: 0.3,
    currentIndex: selected ?? 0,
    onTap: (index) {
        setState(() {
            selected = index;
        });
    },
),

BubbleNavigationBar

BubbleBarStyle.horizotnal

BubbleNavigationBar(
    items: [
        BubbleBarItem(
            backgroundColor: Colors.deepPurple,
            icon: Icon(
                    Icons.home,
                ),
            activeIcon: Icon(Icons.home),
            title: Text("Home"),
        ),
        
        BubbleBarItem(
            backgroundColor: Colors.green,
            icon: Icon(
                    Icons.add,
                    color: Colors.black,
                ),
            activeIcon: Icon(
                    Icons.add_circle_outline_outlined,
                    color: Colors.green,
                ),
            title: Text("Add"),
        ),
        BubbleBarItem(
            backgroundColor: Colors.pinkAccent,
            icon: Icon(
                Icons.person,
            ),
            title: Text(
              "Profile",
            ),
          ),
    ],
    unselectedIconColor: Colors.
    barStyle: BubbleBarStyle.horizotnal,
    currentIndex: selected ?? 0,
    onTap: (index) {
        setState(() {
            selected = index;
        });
    },
    iconSize: 38,
    inkEffect: true,
    inkColor: Colors.purple,
    opacity: 0.2,
    hasNotch: false,
),

BubbleBarStyle.vertical

BubbleNavigationBar(
    items: [
        BubbleBarItem(
            backgroundColor: Colors.deepPurple,
            icon: Icon(
                    Icons.home,
                ),
            activeIcon: Icon(Icons.home),
            title: Text("Home"),
        ),
        
        BubbleBarItem(
            backgroundColor: Colors.green,
            icon: Icon(
                    Icons.add,
                    color: Colors.black,
                ),
            activeIcon: Icon(
                    Icons.add_circle_outline_outlined,
                    color: Colors.green,
                ),
            title: Text("Add"),
        ),
        BubbleBarItem(
            backgroundColor: Colors.pinkAccent,
            icon: Icon(
                Icons.person,
            ),
            title: Text(
              "Profile",
            ),
          ),
    ],
    unselectedIconColor: Colors.
    barStyle: BubbleBarStyle.vertical,
    currentIndex: selected ?? 0,
    onTap: (index) {
        setState(() {
            selected = index;
        });
    },
    iconSize: 38,
    inkEffect: true,
    inkColor: Colors.purple,
    opacity: 0.2,
    hasNotch: false,
),