可扩展拖拽浮动按钮

这个 Flutter 包提供了一个带有动画的可扩展和可拖拽的浮动按钮。

## ? 安装

在你的 pubspec.yaml 文件的 dependencies: 部分,添加以下行

dependencies:
  draggable_expandable_fab: <latest version>

要使用最新的更改

  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,// Animatiion distance during open and close. 
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

完整实现

   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,// Animation distance during open and close.
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

GitHub

查看 Github