fab_speed_dial 是一个用于在 Flutter 应用中快速创建浮动按钮（Floating Action Button）并展开多个子按钮的插件。它可以帮助你实现点击主按钮后展开多个子按钮的效果，类似于 Google Material Design 中的 Speed Dial 效果。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 fab_speed_dial 依赖：

dependencies:
  flutter:
    sdk: flutter
  fab_speed_dial: ^3.0.0

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何使用 fab_speed_dial 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FAB Speed Dial Example'),
        ),
        body: Center(
          child: Text('Press the FAB to see the speed dial!'),
        ),
        floatingActionButton: FabSpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22.0),
          children: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                print('Add pressed');
              },
            ),
            IconButton(
              icon: Icon(Icons.edit),
              onPressed: () {
                print('Edit pressed');
              },
            ),
            IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                print('Delete pressed');
              },
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

• animatedIcon: 主按钮的图标，通常使用 AnimatedIcons.menu_close 来实现打开和关闭的动画效果。
• animatedIconTheme: 主按钮图标的样式，可以设置图标的大小、颜色等。
• children: 子按钮列表，每个子按钮都是一个 IconButton，可以设置图标和点击事件。
• onPress: 主按钮的点击事件。
• closeOnSelect: 是否在选择子按钮后自动关闭 Speed Dial，默认为 true。
• tooltip: 主按钮的提示文本。
• heroTag: 用于 Hero 动画的标签，通常是唯一的。

自定义样式

你可以通过设置 FabSpeedDial 的其他参数来自定义样式，例如：

• backgroundColor: 主按钮的背景颜色。
• foregroundColor: 主按钮的前景颜色（图标颜色）。
• elevation: 主按钮的阴影高度。
• shape: 主按钮的形状，可以设置为圆形、矩形等。

完整示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Speed Dial Example'),
      ),
      body: Center(
        child: Text('Press the FAB to see the speed dial!'),
      ),
      floatingActionButton: FabSpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        animatedIconTheme: IconThemeData(size: 22.0),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        elevation: 8.0,
        shape: CircleBorder(),
        children: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              print('Add pressed');
            },
          ),
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {
              print('Edit pressed');
            },
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {
              print('Delete pressed');
            },
          ),
        ],
      ),
    );
  }
}