bubble_animated_tabbar

Description:

bubble animated tabbar

Flutter - Bubble Animated Tabbar #
Preview #

Page View #


Getting Started #
dependencies:
...
bubble_animated_tabbar: 1.0.2
copied to clipboard
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,
),
);
}
copied to clipboard
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
--