Flutter 可拖拽Widget

一、背景
我们经常会看到管理手机软件那种悬浮小圆圈，或者微信公众号的悬浮按钮。它们不仅能悬浮在所有页面之上，还可以在界面任意拖动。我们使用flutter 改如何实现呢？

二、思路分析
1.全局弹窗。这个在flutter里面有一个 Overlay.of(context).insert(overlayEntry);
这个就是可以全局浮动的弹窗。
2.任意拖动。刚好flutter有个Draggable控件，它可以直接拖动一个widget。但是它一松手就会回到之前的位置。
3.为了Draggable控件停留在我们想要的位置，那么久引入了DragTarget。

三、每一个Widget介绍
1.Overlay：Overlay 之于 Flutter , 有点相当于 KeyWindow 之于 iOS 一样，可以将子 widget 置于其他 widget 的顶层，带来 “悬浮”的效果。
2.OverlayEntry：OverlayEntry 之于 Overlay，对于 iOS 开发而言，又有点 subView 之于 KeyWindow 的味道了。 OverlayEntry 是视图的实际的容器， 把其往 Overlay 那儿添加了，就可以成像了。
3.Draggable

const Draggable({
 Key key,
 @required this.child,              // 初始化显示的 widget
 @required this.feedback,       // 拖拽过程中（活动中）显示的 widget
 this.data,                                 // widget 携带的数据，放手时可以将这个 data 数据传递出去
 this.axis,                                 // 限制 draggable 的移动范围
 this.childWhenDragging,            // 拖住动作发生过程中，初始化位置显示的 widget
 this.feedbackOffset = Offset.zero, // 当 feedback 与 child 相比，有 transform 的时候，需要用到这个属性来调整 hittest 范围
 this.dragAnchor = DragAnchor.child, //锚点
 this.affinity,                         // 单词的意思是亲和力，当 Draggable 位于 另外一个 Scrollable 控件內时，来控制到底这个这个拖拽事件到底由 Draggable 响应，还是由 Scrollable 控件来响应
 this.maxSimultaneousDrags, // 限制有多少个 Draggable 同时发生 拖拽动作
 this.onDragStarted,                    // 拖拽动作开始回调
 this.onDraggableCanceled,      // 拖拽动作取消回调
 this.onDragEnd,                            //拖拽动作结束回调
 this.onDragCompleted,              // 拖拽动作完成回调, 并被一个 DragTarget 接收
 this.ignoringFeedbackSemantics = true, // 也是看了文档才知道，这个属性还是有点用的，当 feedback 跟 child 是同一个 widget A 对象时，就应该把这个属性设成 false, 配合赋值一个 GlobalKey，这样，这个 widget A 就不会在 feedback 跟 child 切换时，重新销毁后又创建了。这个在 widget A 带有播放动画是比较容易看出区别，每次手指拖放都伴随着动画的重新开始
})

4.DragTarget

const DragTarget({
  Key key,
  @required this.builder,  //根据 Draggable 传过来的 data ,来显示想要的 widget
  this.onWillAccept,            // 根据传过来的 data ,选择是否接收这个 Draggable， 返回 true 则激活 onAccept
  this.onAccept,                    // Draggable 被丢进了这个 DragTarget 区域后回调
  this.onLeave,                     // Draggable 离开 DragTarget 区域后的回调
}) : super(key: key);

四、完整代码

import 'package:flutter/cupertino.dart';

class DragOverlay {
  static Widget view;
  static OverlayEntry _holder;

  static void remove() {
    if (_holder != null) {
      _holder.remove();
      _holder = null;
    }
  }

  static void show({@required BuildContext context, @required Widget view}) {
    DragOverlay.view = view;
    remove();
    OverlayEntry overlayEntry = OverlayEntry(builder: (context){
      return Positioned(
        top: MediaQuery.of(context).size.height *0.7,
        child: _buildDraggable(context),
      );
    });
    Overlay.of(context).insert(overlayEntry);
    _holder = overlayEntry;
  }

  static _buildDraggable(context){
    return Draggable(
      child: view,
      feedback: view,
      onDragStarted: (){

      },
      onDragEnd: (detail){
        print("onDraEnd:${detail.offset}");
        //放手时候创建一个DragTarget
        createDragTarget(offset:detail.offset,context:context);
      },
      //当拖拽的时候就展示空
      childWhenDragging: Container(),
      ignoringFeedbackSemantics: false,
    );
  }

  static void createDragTarget({Offset offset,BuildContext context}){
     if(_holder != null){
       _holder.remove();
     }
     _holder = new OverlayEntry(builder: (context){
       bool isLeft = true;
       if(offset.dx + 100 > MediaQuery.of(context).size.width / 2){
         isLeft = false;
       }
       double maxY = MediaQuery.of(context).size.height - 100;

       return Positioned(
         top: offset.dy < 50 ? 50 : offset.dy > maxY ? maxY : offset.dy,
         left: isLeft ? 0:null,
         right: isLeft ? null : 0,
         child: DragTarget(
           onWillAccept: (data){
             print('onWillAccept:$data');
             ///返回true 会将data数据添加到candidateData列表中，false时会将data添加到rejectData
             return true;
           },
           onAccept: (data){
             print('onAccept : $data');
           },
           onLeave: (data){
             print("onLeave");
           },
           builder: (BuildContext context,List incoming,List rejected){
             return _buildDraggable(context);
           },
         ),
       );
     });
     Overlay.of(context).insert(_holder);
  }
}

五、调用

DragOverlay.show(context: context, view: Container(
      width: 100,
      height: 20,
      color: Colors.red,
    ));