bubble_animated_tabbar 1.0.2 copy "bubble_animated_tabbar: ^1.0.2" to clipboard
bubble_animated_tabbar: ^1.0.2 copied to clipboard

A bubble animated tabbar for bottom navigation on flutter apps

Flutter - Bubble Animated Tabbar #

Preview #

Alt Text

Page View #

Alt Text

Getting Started #

dependencies:
	...
	bubble_animated_tabbar: 1.0.2

Usage Example #

Adding the widget

// Array of Tabs

List<Map> children = [
    {
      'icon': Icons.home,
      'title': 'Home',
      'iconSize':23,
      'color': Color.fromRGBO(186, 121, 9, 0.25),
      'textColor': Color.fromRGBO(173, 118, 23, 1),
      'customTextStyle':TextStyle(color: Color.fromRGBO(173, 118, 23, 1)),
    },
    {
      'icon': Icons.mail,
      'title': 'Messages',
      'color': Color.fromRGBO(0, 2, 148, 0.22),
      'textColor': Color.fromRGBO(26, 1, 135, 0.9),
    },
    {
      'icon': Icons.person,
      'title': 'User Account',
      'color': Color.fromRGBO(18, 140, 126, 0.25),
      'textColor': Color.fromRGBO(6, 125, 111, 1),
    },
  ];

  getBoxDecoration() {
    return BoxDecoration(
      color: Colors.white,
      boxShadow: [
        new BoxShadow(
          color: Color.fromRGBO(0, 0, 0, 0.1),
            blurRadius: 1.0,
            spreadRadius: 1.0
          )
        ]
    );
  }

// Add required properties for Animated TabBar
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: Text(children[_currentIndex]['title']) ),
      bottomNavigationBar: AnimatedTabbar(
        padding:EdgeInsets.only(left: 4, top: 6, right: 4, bottom: 6),
        containerDecoration: getBoxDecoration(),
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        children: children,
      ),
    );
  }

AnimatedTabbar Properties #

Property Type Required Default Value
containerDecoration BoxDecoration NO --
padding EdgeInsets NO --
onTap Function Yes --
children Array < Map > Yes --

Tab Properties #

Property Type Required Default Value
icon IconData YES --
iconSize Int NO 20
title String YES --
color Color YES --
textColor Color YES --
tabPadding EdgeInsets NO EdgeInsets.fromLTRB(10, 4, 10, 4)
customTextStyle TextStyle NO --
12
likes
30
pub points
29%
popularity

Publisher

unverified uploader

A bubble animated tabbar for bottom navigation on flutter apps

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on bubble_animated_tabbar