stylish_bottom_bar 0.0.2
stylish_bottom_bar: ^0.0.2 copied to clipboard

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

Hello stylish_bottom_bar Version

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

⭐ Installing #

dependencies:
    stylish_bottom_bar: ^0.0.2
    

⚡ 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

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,
),

1
likes
130
pub points
9%
popularity

Publisher

marsad.ml

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on stylish_bottom_bar