Draggable 是Flutter中一个可以拖拽到DragTarget的widget，同时他可以把自己带有的数据传递给DragTarget。

使用效果如下：

一个可拖动的Widget，拖动时原Widget保持不变，会创建一个新的Widget跟随手指滑动。

Draggable1.gif

接下来是实现过程

首先，创建一个可见的界面，用于展示我们想要测试的Draggable。在main.dart中创建一个App，App中通过Scaffold实现appBar和body，Draggable就在body中绘制。

void main() => runApp(new MyApp());

///用于展示Demo的界面，其中的MaterialApp、ThemeData、AppBar都是不必要的，只是稍微美观一点。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text("DraggableDemo"),
          ),
          body: MyDraggable()),//用于测试Draggable的Widget
    );
  }
}

然后就是创建要试用的Draggable了，有两个必传参数

@required this.child,

@required this.feedback,

child是静止时显示的Widget，
feedback是拖动时跟随手指滑动的Widget。

同时Draggable还可以携带一个data数据源，将来可以传递给DragTarget。

///draggable 是一个可以拖拽到DragTarget的widget
class MyDraggable extends StatelessWidget {
  final data;
  const MyDraggable({this.data = "MyDraggable", Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Draggable(
      data: data,
      child: Container(
        width: 150.0,
        height: 150.0,
        color: Colors.red[500],
        child: Center(
          child: Text('Draggable'),
        ),
      ),
      feedback: Container(
        width: 150.0,
        height: 150.0,
        color: Colors.blue[500],
        child: Icon(Icons.feedback),
      ),
    );
  }
}

这样就实现了一个简单可拖拽的Widget，虽然并没有什么卵用 哈哈。。