Flutter可拖拽扩展浮动按钮插件 draggable_expandable_fab 的使用

draggable_expandable_fab 是一个提供可扩展和可拖拽的浮动按钮的Flutter插件，带有动画效果。以下是详细的使用说明和示例代码。

安装

在 pubspec.yaml 文件中的 dependencies 部分添加以下内容：

dependencies:
  draggable_expandable_fab: <latest version>

如果你想使用最新的更改，可以使用以下方式：

dependencies:
  draggable_expandable_fab:
    git:
      url: https://github.com/Tughra/draggable_expandable_fab.git
      ref: master

使用方法

首先，导入该插件：

import 'package:draggable_expandable_fab/draggable_expandable_fab.dart';

然后，在 Scaffold 中替换以下参数以更好地使用该插件：

floatingActionButtonAnimator: NoScalingAnimation(),
floatingActionButtonLocation: ExpandableFloatLocation(),

简单实现

以下是一个简单的示例，展示了如何创建一个包含三个子按钮的可扩展和可拖拽的浮动按钮：

Scaffold(
  floatingActionButtonAnimator: NoScalingAnimation(),
  floatingActionButtonLocation: ExpandableFloatLocation(),
  floatingActionButton: ExpandableDraggableFab(
    childrenCount: 3,
    distance: 100, // 动画距离，在打开和关闭时使用。
    children: [
      FloatingActionButton(onPressed: () {}),
      FloatingActionButton(onPressed: () {}),
      FloatingActionButton(onPressed: () {}),
    ],
  ),
  body: Container(),
);

完整实现

以下是一个更复杂的示例，展示了更多的配置选项：

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

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final Size _size = MediaQuery.of(context).size;

    return Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(
        childrenCount: 3,
        onTab: () {
          debugPrint("Tab");
        },
        childrenTransition: ChildrenTransition.fadeTransation,
        initialOpen: false,
        childrenBoxDecoration: const BoxDecoration(color: Colors.red),
        enableChildrenAnimation: true,
        curveAnimation: Curves.linear,
        reverseAnimation: Curves.linear,
        childrenType: ChildrenType.columnChildren,
        closeChildrenRotate: false,
        childrenAlignment: Alignment.topRight,
        initialDraggableOffset: Offset(_size.width - 90, _size.height - 100),
        distance: 100, // 动画距离，在打开和关闭时使用。
        children: [
          FloatingActionButton(
            onPressed: () {
              debugPrint("Button 1 pressed");
            },
            child: Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: () {
              debugPrint("Button 2 pressed");
            },
            child: Icon(Icons.edit),
          ),
          FloatingActionButton(
            onPressed: () {
              debugPrint("Button 3 pressed");
            },
            child: Icon(Icons.delete),
          ),
        ],
      ),
      body: Center(
        child: Text('Drag and expand the FAB'),
      ),
    );
  }
}