Flutter底部菜单弹出插件unicorndial的使用

UnicornDialer 是一个非常方便的 Flutter 插件，可以轻松创建自己的悬浮操作按钮列表。它支持垂直和水平布局，并且可以通过动画效果展示子按钮。

安装

首先，在 pubspec.yaml 文件中添加 unicorndial 插件：

dependencies:
  unicorndial: "^1.1.5"

然后运行以下命令以获取依赖项：

flutter pub get

使用说明

属性

UnicornDialer 类的属性包括：

• int orientation - 浮动按钮列表的方向（垂直或水平）。
• Object parentHeroTag - 主悬浮按钮的 Hero 标记。
• Color backgroundColor - 模态背景颜色。
• Icon parentButton - 开始时的图标。
• Icon finalButtonIcon - 动画完成后结束的图标。
• bool hasBackground - 是否设置背景模态。
• Color parentButtonBackground - 主悬浮按钮的背景颜色。
• List<UnicornButton> childButtons - 悬浮按钮列表。
• int animationDuration - 旋转和扩展动画的持续时间（以毫秒为单位）。
• double childPadding - 按钮标签右侧的填充。
• Function onMainButtonPressed - 如果在 UnicornDialer 父小部件上设置了该函数，则会调用它。
• bool hasNotch - 是否支持 BottomAppBar。

UnicornButton 类的属性包括：

• FloatingActionButton currentButton - 悬浮按钮列表中的按钮。
• String labelText - 按钮的标签文本。
• double labelFontSize - 标签字体大小。
• Color labelColor - 标签颜色。
• Color labelBackgroundColor - 标签容器背景颜色。
• Color labelShadowColor - 标签容器阴影颜色。
• bool labelHasShadow - 是否启用标签阴影。
• bool hasLabel - 是否显示标签。

示例代码

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

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

void main() => runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: Example()));

class Example extends StatefulWidget {
  _Example createState() => _Example();
}

class _Example extends State<Example> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建子按钮列表
    var childButtons = List<UnicornButton>();

    // 添加第一个子按钮
    childButtons.add(UnicornButton(
        hasLabel: true, // 是否显示标签
        labelText: "Choo choo", // 标签文本
        currentButton: FloatingActionButton(
          heroTag: "train", // Hero 标记
          backgroundColor: Colors.redAccent, // 背景颜色
          mini: true, // 小型按钮
          child: Icon(Icons.train), // 图标
          onPressed: () {}, // 按钮点击事件
        )));

    // 添加第二个子按钮
    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "airplane", // Hero 标记
            backgroundColor: Colors.greenAccent, // 背景颜色
            mini: true, // 小型按钮
            child: Icon(Icons.airplanemode_active), // 图标
            onPressed: () {} // 按钮点击事件
        )));

    // 添加第三个子按钮
    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "directions", // Hero 标记
            backgroundColor: Colors.blueAccent, // 背景颜色
            mini: true, // 小型按钮
            child: Icon(Icons.directions_car), // 图标
            onPressed: () {} // 按钮点击事件
        )));

    return Scaffold(
      floatingActionButton: UnicornDialer(
        backgroundColor: Color.fromRGBO(255, 255, 255, 0.6), // 模态背景颜色
        parentButtonBackground: Colors.redAccent, // 主按钮背景颜色
        orientation: UnicornOrientation.VERTICAL, // 垂直方向
        parentButton: Icon(Icons.add), // 主按钮图标
        childButtons: childButtons, // 子按钮列表
      ),
      appBar: AppBar(title: Text("UnicornDialer 示例")), // 应用栏
      body: Center(
        child: RaisedButton(
          onPressed: () {
            setState(() {}); // 更新状态
          },
          child: Text("刷新页面"), // 按钮文本
        ),
      ),
    );
  }
}