Flutter底部导航栏插件spincircle_bottom_bar的使用

spincircle_bottom_bar 是一个为 Flutter 应用程序提供的易于实现的旋转型底部导航栏。本文将详细介绍该插件的当前特性、使用方法，并提供一个完整的示例代码。

当前特性

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

Demo

使用方法

要使用 spincircle_bottom_bar，只需在 Scaffold 的 body 中添加 SpinCircleBottomBarHolder，如下所示：

完整示例代码

import 'package:flutter/material.dart';
import 'package:spincircle_bottom_bar/modals.dart';
import 'package:spincircle_bottom_bar/spincircle_bottom_bar.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("RetroPortal Studio"),
          backgroundColor: Colors.deepOrangeAccent,
        ),
        // Adding SpinCircleBottomBarHolder to body of Scaffold
        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(
              color: Colors.redAccent,
              icon: Icon(
                Icons.expand_less,
                color: Colors.white,
              ),
              elevation: 2,
            ),
            elevation: 2.0,
            items: [
              // Suggested count: 4
              SCBottomBarItem(icon: Icons.verified_user, title: "User", onPressed: () {}),
              SCBottomBarItem(icon: Icons.supervised_user_circle, title: "Details", onPressed: () {}),
              SCBottomBarItem(icon: Icons.notifications, title: "Notifications", onPressed: () {}),
              SCBottomBarItem(icon: Icons.details, title: "New Data", onPressed: () {}),
            ],
            circleItems: [
              // Suggested count: 3
              SCItem(icon: Icon(Icons.add), onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondScreen()));
              }),
              SCItem(icon: Icon(Icons.print), onPressed: () {}),
              SCItem(icon: Icon(Icons.map), onPressed: () {}),
            ],
            bnbHeight: 80, // Suggested Height 80
          ),
          child: Container(
            color: Colors.orangeAccent.withAlpha(55),
            child: Center(child: Text("Isn't this Awesome!")),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: Text("This is the second screen!"),
      ),
    );
  }
}

路线图

计划增加更多的自定义选项。

许可证

MIT License

以上就是 spincircle_bottom_bar 插件的使用方法和示例代码。希望对您有所帮助！如果有任何问题或建议，欢迎随时提出。