滾動底部欄-Flutter

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

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