如何用DragTarget小部件替换Draggable小部件？

Question

我正在玩Draggable和DragTarget小部件，但是我受不了。我正在做一个简单的应用程序，我想通过拖放来重组一些元素，但是有一个小故障。

Here是我到目前为止所做的。

here是我想问的小问题。

我的目的是在目标上被接受时用Draggable小部件替换整个DragTarget小部件。但是我做事情的方式，我认为我将Draggable嵌套在DragTarget中，将DragTarget嵌套在Draggable中。

我的尝试如下所示：

可拖动的小部件：

class DraggableData extends StatefulWidget {
  final String chord;
  DraggableChord({
    Key key,
    @required this.data,
  }) : super(key: key);

  @override
  _DraggableDataState createState() => _DraggableDataState();
}

class _DraggableDataState extends State<DraggableData> {
  bool wasDropped = false;
  @override
  Widget build(BuildContext context) {
    final Size size = (TextPainter(
            text: TextSpan(
              text: widget.data,
            ),
            maxLines: 1,
            textScaleFactor: MediaQuery.of(context).textScaleFactor,
            textDirection: TextDirection.ltr)
          ..layout())
        .size;

    return Draggable(
      data: widget.data,
      child: wasDropped ? DragTargetData() : Text(widget.data, style: TextStyle(fontSize: 30),),
      childWhenDragging: Container(
        width: size.width,
        height: size.height,
        color: Colors.red,
      ),
      feedback: Text(
        widget.chord,
        style: TextStyle(
          color: Colors.black,
          decoration: TextDecoration.none,
          fontSize: 13,
        ),
      ),
      onDragCompleted: () {
        setState(() {
          wasDropped = true;
        });
      },
    );
  }
}

DragTarget小部件：

class DragTargetData extends StatefulWidget {
  DragTargetData({Key key}) : super(key: key);

  @override
  _DragTargetDataState createState() => _DragTargetDataState();
}

class _DragTargetDataState extends State<DragTargetData> {
  bool wasDropped = false;
  String data = 'N';
  @override
  Widget build(BuildContext context) {
    return DragTarget(
      builder: (context, List<String> candidateData, rejectedData) {
        return Container(
          child: wasDropped
              ? DraggableData(data: data)
              : Container(
                  width: 20,
                  height: 20,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.blue,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
        );
      },
      onAccept: (data) {
        setState(() {
          this.data = data;
          wasDropped = true;
        });
      },
    );
  }
}

有人可以帮助我找到实现所需功能的最佳方法吗？我会很好的。