Flutter底部气泡导航栏插件bubble_bottom_bar的使用

Flutter底部气泡导航栏插件bubble_bottom_bar的使用

BubbleBottomBar 是一个由 cubertodesign 设计并由 westdabestdb 开发的 Flutter 小部件。

开始使用

首先，在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  bubble_bottom_bar: ^1.2.0

然后在 Dart 代码中导入该包：

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

使用示例

下面是一个完整的示例代码，展示了如何使用 BubbleBottomBar 插件：

import 'package:flutter/material.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bubble Bottom Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Bubble Bottom Bar Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late int currentIndex;

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BubbleBottomBar(
        hasNotch: true,
        fabLocation: BubbleBottomBarFabLocation.end,
        opacity: .2,
        currentIndex: currentIndex,
        onTap: changePage,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(16),
        ), // 当凹槽启用时，圆角不起作用。
        elevation: 8,
        tilesPadding: EdgeInsets.symmetric(vertical: 8.0),
        items: [
          BubbleBottomBarItem(
            showBadge: true,
            badge: Text("5"),
            badgeColor: Colors.deepPurpleAccent,
            backgroundColor: Colors.red,
            icon: Icon(
              Icons.dashboard,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.dashboard,
              color: Colors.red,
            ),
            title: Text("Home"),
          ),
          BubbleBottomBarItem(
              backgroundColor: Colors.deepPurple,
              icon: Icon(
                Icons.access_time,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.access_time,
                color: Colors.deepPurple,
              ),
              title: Text("Logs")),
          BubbleBottomBarItem(
              backgroundColor: Colors.indigo,
              icon: Icon(
                Icons.folder_open,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.folder_open,
                color: Colors.indigo,
              ),
              title: Text("Folders")),
          BubbleBottomBarItem(
              backgroundColor: Colors.green,
              icon: Icon(
                Icons.menu,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.menu,
                color: Colors.green,
              ),
              title: Text("Menu"))
        ],
      ),
    );
  }
}

显示徽章

你可以通过设置 showBadge 和 badge 属性来在底部导航栏项上显示徽章。例如：

BubbleBottomBarItem(
  showBadge: true,
  badge: Text("5"),
  badgeColor: Colors.deepPurpleAccent,
  backgroundColor: Colors.red,
  icon: Icon(
    Icons.dashboard,
    color: Colors.black,
  ),
  activeIcon: Icon(
    Icons.dashboard,
    color: Colors.red,
  ),
  title: Text("Home"),
)