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

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

...

Options for Rolling Bottom Bar Item use

NameDescriptionRequiredDefault
iconDataIconData to use as item iconTrue
labelString to use as label itemFalse
activeColorColor to use when icon is active. Only works with useActiveColorByDefault property of RollingBottomBarItem set on trueFalseColors.green

Options for Rolling Bottom Bar use

NameDescriptionRequiredDefault
controllerPageView controller to use to move between pagesTrue
itemsList of RollingBottomBarItem to render into bottom barTrue
onTapFunction triggered when an item is tappedTrue
colorColor value to use as backgroundFalseColors.white
itemColorColor value to use with inactive itemsFalseColors.grey700
activeItemColorColor value to use with active itemsFalseColors.green
enableIconRotationBoolean value to indicate when rotation effect is triggeredFalsefalse
flatBoolean value to indicate if the bottom bar has shadow or notFalsefalse
useActiveColorByDefaultBoolean value to indicate when to use individual active color for each childFalsetrue

Libraries

constants
rolling_bottom_bar
rolling_bottom_bar
rolling_bottom_bar
rolling_bottom_bar