Flutter底部导航栏动画插件kbspinningbottombar的使用

KB Spinning Bottom Bar

一个用于Flutter应用程序的简单实现旋转圆形底部导航栏的插件。

当前特性

• 初始发布旋转圆形底部导航栏
• 可自定义活动和非活动状态下的标签图标和文本
• 可自定义旋转圆的颜色
• 可自定义底部栏和旋转圆的项目数量

演示

使用方法

要使用该插件，只需将SpinCircleBottomBarHolder添加到Scaffold的body中，如下所示：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '旋转圆形底部导航栏',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("RetroPortal Studio"),
          backgroundColor: Colors.deepOrangeAccent,
        ),
        // 添加旋转圆形底部导航栏到Scaffold的body中
        body: SpinCircleBottomBarHolder(
          bottomNavigationBar: SCBottomBarDetails(
              circleColors: [Colors.white, Colors.orange, Colors.redAccent], // 旋转圆的颜色数组
              iconTheme: IconThemeData(color: Colors.black45), // 非活动状态下图标的颜色
              activeIconTheme: IconThemeData(color: Colors.orange), // 活动状态下图标的颜色
              backgroundColor: Colors.white, // 底部栏背景颜色
              titleStyle: TextStyle(color: Colors.black45, fontSize: 12), // 非活动状态下标题的样式
              activeTitleStyle: TextStyle(
                  color: Colors.black,
                  fontSize: 12,
                  fontWeight: FontWeight.bold), // 活动状态下标题的样式
              actionButtonDetails: SCActionButtonDetails(
                  activeWidget: Icon(Icons.expand_less_outlined, color: Colors.white), // 激活按钮的图标
                  closeWidget: Icon(Icons.close, color: Colors.white), // 关闭按钮的图标
                  actionButtonText: "Royalty" // 按钮上的文本
              ),
              shadow: [], // 阴影设置
              elevation: 2.0, // 高度
              items: [
                // 建议的数量为4
                SCBottomBarItem(
                    icon: Icons.verified_user, title: "用户", onPressed: () {}), // 第一个选项
                SCBottomBarItem(
                    icon: Icons.supervised_user_circle,
                    title: "详情",
                    onPressed: () {}), // 第二个选项

                SCBottomBarItem(
                    icon: Icons.notifications,
                    title: "通知",
                    onPressed: () {}), // 第三个选项
                SCBottomBarItem(
                    icon: Icons.details, title: "新数据", onPressed: () {}), // 第四个选项
              ],
              circleItems: [
                // 建议的数量为3
                SCItem(icon: Icon(Icons.add), onPressed: () {}), // 第一个旋转圆选项
                SCItem(icon: Icon(Icons.print), onPressed: () {}), // 第二个旋转圆选项
                SCItem(icon: Icon(Icons.map), onPressed: () {}), // 第三个旋转圆选项
              ],
              bnbHeight: 80 // 建议的高度为80
          ),
          child: Container(
            color: Colors.orangeAccent.withAlpha(55),
            child: Center(
              child: Text("这不是很棒吗！"),
            ),
          ),
        ),
      ),
    );
  }
}