How to add widgets in a List and then Edit its properties later

Question

I have create a drag and drop form .I Have two Columns. First column contains draggable items which are the widgets that are used to create customize form (something similar to google forms).

So the problem is that when I add widget I am not able to customize it. For example here :

Whenever the widgets are dropped in DraggableTarget I am creating 2 List. The first List contains all the widgets and the second List has all the properties of the widget in first List. For Example: widgetList=[TextField]; propertiesList[{"value":"","labelText":"Text","minChar":1,"maxChar":20}];

I want to make Changes in the List whenever there is change in UI i.e whenever users makes changes in the field that is shown in image above. Is there any other better approach to perform this task.

Here is Some Code related to this Problem:

This code is executed when the widget is dropped on draggedTarget:

 fieldList.add(FormTextFieldModel(value: "", For: "Text", type: "TextField",).toJson());
                                    widgetList.add(CustomTextField(textFor: "Text",required: true,));

Here is my form Creation method

await FirebaseFirestore.instance.collection("Company").doc(ConstantValue.companyId).collection("Forms").doc(formName).set(
          FormModel(
            formName: formName,
            formField: fieldList,
          ).toJson()
          ,SetOptions(merge: true));
      BotToast.showText(text: "Form Created");