rolling_bottom_bar

Description:

rolling bottom bar

Rolling Bottom Bar #
This packages, based on this demo by Kabo showing a bottom bar with a dynamic ball indicator.
New Features 💥 #

Capability to avoid the bottom bar shadow by flat property on false
Setting active color by each item define on color property of RollingBottomBarItem widget

Demo #

Instalation #
Include rolling_bottom_bar in your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
rolling_bottom_bar: version
copied to clipboard
Usage #
To use this package, just import it into your file, build your bottom bar together with a PageView and enjoy it.
import 'package:rolling_bottom_bar/rolling_bottom_bar.dart';
import 'package:rolling_bottom_bar/rolling_bottom_bar_item.dart';

...

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rolling Bottom Bar'),
),
body: PageView(
controller: _controller,
children: <Widget>[
ColoredBox(color: Colors.blueGrey.shade100),
ColoredBox(color: Colors.redAccent),
ColoredBox(color: Colors.greenAccent),
ColoredBox(color: Colors.yellowAccent),
],
),
extendBody: true,
bottomNavigationBar: RollingBottomBar(
controller: _controller,
items: [
RollingBottomBarItem(Icons.home, label: 'Page 1'),
RollingBottomBarItem(Icons.star, label: 'Page 2'),
RollingBottomBarItem(Icons.person, label: 'Page 3'),
RollingBottomBarItem(Icons.access_alarm, label: 'Page 4'),
],
activeItemColor: Colors.green.shade700,
enableIconRotation: true,
onTap: (index) {
_controller.animateToPage(
index,
duration: const Duration(milliseconds: 400),
curve: Curves.easeOut,
);
},
),
);
}
}

...
copied to clipboard
Options for Rolling Bottom Bar Item use #



Name
Description
Required
Default




iconData
IconData to use as item icon
True



label
String to use as label item
False



activeColor
Color to use when icon is active. Only works with useActiveColorByDefault property of RollingBottomBarItem set on true
False
Colors.green



Options for Rolling Bottom Bar use #



Name
Description
Required
Default




controller
PageView controller to use to move between pages
True



items
List of RollingBottomBarItem to render into bottom bar
True



onTap
Function triggered when an item is tapped
True



color
Color value to use as background
False
Colors.white


itemColor
Color value to use with inactive items
False
Colors.grey[700]


activeItemColor
Color value to use with active items
False
Colors.green


enableIconRotation
Boolean value to indicate when rotation effect is triggered
False
false


flat
Boolean value to indicate if the bottom bar has shadow or not
False
false


useActiveColorByDefault
Boolean value to indicate when to use individual active color for each child
False
true