Flutter Draggable和DragTarget：如何拖动小部件并在DragTarget中重建它？

我是个新手，但我似乎仍然不明白UI构建是如何工作的

这是我的密码：

import 'package:flutter/material.dart';

class DragDemoView extends StatefulWidget
{
  DragDemoView(Key key) : super(key: key);

  @override
  DragDemoViewState createState() => new DragDemoViewState();
}

class DragDemoViewState extends State<DragDemoView>
{

  Icon icon1;
  Icon icon2;
  Icon icon4;
  Icon icon3;

  @override
  void initState() {
    icon1 = new Icon(Icons.wifi, color: Colors.white,);
    icon2 = new Icon(Icons.map, color: Colors.white,);
    icon3 = new Icon(Icons.access_alarm, color: Colors.white,);
    icon4 = new Icon(Icons.account_balance, color: Colors.white,);
    super.initState();
  }

  bool accepted = false;


  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Draggable(
                child: icon1,
                feedback: icon1,
                childWhenDragging: icon1,
                data: icon1,
              ),
              Draggable(
                child: icon2,
                feedback: icon2,
                childWhenDragging: icon2,
                data: icon2,
              ),
              Draggable(
                child: icon3,
                feedback: icon3,
                childWhenDragging: icon3,
                data: icon3,
              ),
              Draggable(
                child: icon4,
                feedback: icon4,
                childWhenDragging: icon4,
                data: icon4,
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                width: 100.0,
                height: 100.0,
                decoration: BoxDecoration(
                  border: Border.all(),
                  color: Colors.deepOrangeAccent
                ),
                child: DragTarget<Icon>(builder: (context, List<Icon> candidateData, rejectedData) {
                  return accepted ? candidateData.first : new Icon(Icons.error, color: Colors.white,);
                },

                  onWillAccept: (data) {
                    return true;
                  },

                  onAccept: (data) {
                    setState(() {
                      accepted = true;
                    });
                  },

                ),
              ),
            ],
          ),
        ],
      )
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

导入“包装：颤振/材料.省道”；
类DragDemoView扩展StatefulWidget
{
DragDemoView（Key）：super（Key:Key）；
@凌驾
DragDemoViewState createState（）=>新的DragDemoViewState（）；
}
类DragDemoViewState扩展了状态
{
图标icon1；
图标icon2；
图标图标图标4；
图标图标图标3；
@凌驾
void initState（）{
icon1=新图标（Icons.wifi，颜色：Colors.white，）；
icon2=新图标（Icons.map，颜色：Colors.white，）；
icon3=新图标（Icons.access_报警，颜色：Colors.white，）；
icon4=新图标（Icons.account_balance，颜色：Colors.white，）；
super.initState（）；
}
布尔接受=假；
@凌驾
小部件构建（构建上下文）{
返回中心(
孩子：排(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
纵队(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
拖拉的(
孩子：icon1，
反馈：icon1，
ChildWhenDraging:icon1，
数据：icon1，
),
拖拉的(
孩子：icon2，
反馈：icon2，
儿童签名：icon2，
数据：icon2，
),
拖拉的(
孩子：icon3，
反馈：icon3，
儿童签名：icon3，
数据：icon3，
),
拖拉的(
孩子：icon4，
反馈：icon4，
儿童签名：icon4，
数据：icon4，
),
],
),
纵队(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
容器(
宽度：100.0，
高度：100.0，
装饰：盒子装饰(
border:border.all（），
颜色：Colors.deeporangeacent
),
子项：DragTarget（生成器：（上下文、列表候选数据、拒绝数据）{
返回已接受？候选数据。第一：新图标（Icons.error，颜色：Colors.white，）；
},
onWillAccept:（数据）{
返回true；
},
onAccept:（数据）{
设置状态（）{
接受=正确；
});
},
),
),
],
),
],
)
);
}
@凌驾
无效处置（）{
super.dispose（）；
}

如您所见，我正试图将图标作为可拖动对象移动到可拖动对象，并使用随可拖动对象提供的数据在其中重建它。但是，我得到的结果是一条错误消息，其中指出：“错误状态：无元素”

这里的大图是这样的：屏幕上的网格或某种布局，用户可以在其中生成不同的小部件（例如图像）通过将它们从列表拖放到所需位置。我将如何做到这一点？为每个Draggable提供一个键，然后通过查找对应的小部件到键来在DragTarget中构建所需的小部件？或者我完全错了吗