Flutter底部滚动导航插件rolling_bottom_bar的使用

rolling_bottom_bar 是一个基于 Kabo 的 演示 开发的Flutter插件，它展示了一个带有动态小球指示器的底部导航栏。以下是该插件的详细介绍和使用方法。

新功能 💥

• 通过 flat 属性设置为 false 来避免底部导航栏阴影。
• 通过 RollingBottomBarItem 小部件的 color 属性为每个项目设置激活颜色。

示例效果

安装

在你的 pubspec.yaml 文件中添加 rolling_bottom_bar：

dependencies:
  flutter:
    sdk: flutter
  rolling_bottom_bar: ^版本号

请确保替换 ^版本号 为你需要的具体版本号。

使用方法

要使用这个包，只需将其导入到你的文件中，并构建你的底部导航栏和 PageView 即可。

示例代码

以下是一个完整的示例demo：

import 'package:flutter/material.dart';
import 'package:rolling_bottom_bar/rolling_bottom_bar.dart';
import 'package:rolling_bottom_bar/rolling_bottom_bar_item.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = PageController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @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,
        flat: true,
        useActiveColorByDefault: false,
        items: [
          RollingBottomBarItem(Icons.home, label: 'Page 1', activeColor: Colors.redAccent),
          RollingBottomBarItem(Icons.star, label: 'Page 2', activeColor: Colors.blueAccent),
          RollingBottomBarItem(Icons.person, label: 'Page 3', activeColor: Colors.yellowAccent),
          RollingBottomBarItem(Icons.access_alarm, label: 'Page 4', activeColor: Colors.orangeAccent),
        ],
        enableIconRotation: true,
        onTap: (index) {
          _controller.animateToPage(
            index,
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeOut,
          );
        },
      ),
    );
  }
}

参数说明

RollingBottomBarItem 参数

RollingBottomBar 参数

以上就是 rolling_bottom_bar 插件的基本介绍与使用方法。希望对您有所帮助！