I have a List of Widgets and I want to update the properties of a specific widget inside the List - flutter

Question

I have Created a list and an Add Button When user clicks on ADD button a widget is Created and Added to the Widget List.
Image of Output which has list of Predefined widgets on the left and an instance of that widget is created and shown on the right side when user clicks on Add Button : -
Now I want to edit the properties of those widgets on the right .For example making the text Bold or Add value to textfield or changing the Text on the Button or defining what happens on onPressed event dynamically
Here is the code for Both the classes
PredfinedFileds.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PreDefinedFields{
static Text textCustom= Text("New Text");
static TextFormField textFieldCustom= TextFormField(
);
static ElevatedButton elevatedButtonCustom= ElevatedButton(onPressed: (){}, child: Text("New Button"));
}
CustomizableForm.dart
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'PreDefinedFields.dart';
class CustomizableForm extends StatefulWidget {
const CustomizableForm({Key? key}) : super(key: key);
#override
State<CustomizableForm> createState() => _CustomizableFormState();
}
class _CustomizableFormState extends State<CustomizableForm> {
static bool isBold=false;
List fieldList=[];
List widgetList=[];
var text;
#override
Widget build(BuildContext context) {
void ShowDilogText(isBold){
showGeneralDialog(
context: context,
barrierLabel: "Barrier",
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: Duration(milliseconds: 700),
pageBuilder: (_, __, ___) {
return Center(
child: Container(
height: 440,
width: MediaQuery.of(context).size.width/2,
child: SizedBox(child: Container(
child: Center(child: ElevatedButton(
onPressed: (){
isBold != isBold;
},
child: Text("Bold"),
),),
)),
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(40)),
),
);
},
transitionBuilder: (_, anim, __, child) {
Tween<Offset> tween;
if (anim.status == AnimationStatus.reverse) {
tween = Tween(begin: Offset(-1, 0), end: Offset.zero);
} else {
tween = Tween(begin: Offset(1, 0), end: Offset.zero);
}
return SlideTransition(
position: tween.animate(anim),
child: FadeTransition(
opacity: anim,
child: child,
),
);
},
);
}
TextEditingController dateController= TextEditingController();
TextField datePickerField=TextField(
controller: dateController, //editing controller of this TextField
decoration: const InputDecoration(
icon: Icon(Icons.calendar_today), //icon of text field
labelText: "Enter Date" //label text of field
),
readOnly: true, // when true user cannot edit text
onTap: () async {
//when click we have to show the datepicker
DateTime? pickedDate = await showDatePicker(
context: context,
initialDate: DateTime.now(), //get today's date
firstDate:DateTime(2000), //DateTime.now() - not to allow to choose before today.
lastDate: DateTime(2101)
);
if(pickedDate != null ){
print(pickedDate); //get the picked date in the format => 2022-07-04 00:00:00.000
String formattedDate = DateFormat('yyyy-MM-dd').format(pickedDate); // format date in required form here we use yyyy-MM-dd that means time is removed
print(formattedDate); //formatted date output using intl package => 2022-07-04
//You can format date as per your need
setState(() {
dateController.text = formattedDate; //set foratted date to TextField value.
});
}else{
print("Date is not selected");
}
}
);
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Row(
children: [
//For Predefined Fields
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: MediaQuery.of(context).size.width/3,
child: Column(
children: [
ListTile(
leading: const Icon(Icons.text_fields),
title: const Text("Text"),
trailing: ElevatedButton(onPressed: (){
fieldList.add('Text');
widgetList.add(PreDefinedFields.textCustom);
setState(() {
print(fieldList);
});
}, child: Text("+ Add")),
),
ListTile(
leading: const Icon(Icons.text_fields),
title: const Text("Text Field"),
trailing: ElevatedButton(onPressed: (){
fieldList.add('TextField');
widgetList.add(PreDefinedFields.textFieldCustom);
setState(() {
print(fieldList);
});
}, child: Text("+ Add")),
),
ListTile(
leading: const Icon(Icons.text_fields),
title: const Text("Button"),
trailing: ElevatedButton(onPressed: (){
fieldList.add('Button');
widgetList.add(PreDefinedFields.elevatedButtonCustom);
setState(() {
print(fieldList);
});
}, child: Text("+ Add")),
),
ListTile(
leading: const Icon(Icons.text_fields),
title: const Text("Date"),
trailing: ElevatedButton(onPressed: (){
fieldList.add('Date Picker');
widgetList.add(datePickerField);
setState(() {
print(fieldList);
});
}, child: Text("+ Add")),
),
],
),
),
),
//For Form
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: MediaQuery.of(context).size.height-50,
width: MediaQuery.of(context).size.width/2,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: Form(
child: ListView.builder(
shrinkWrap: true,
itemCount: fieldList.length,
itemBuilder: (context,index){
if(fieldList[index]=='Text'){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
PreDefinedFields.textCustom,
Spacer(),
IconButton(onPressed: (){
ShowDilogText(isBold);
setState(() {
final tile = widgetList.firstWhere((item) => item[index]);
});
}, icon: Icon(Icons.edit)),
IconButton(onPressed: (){
}, icon: Icon(Icons.delete,color: Colors.red,))
],
),
);
}
if(fieldList[index]=='Date Picker'){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
SizedBox(
width: 400,
child: datePickerField),
Spacer(),
IconButton(onPressed: (){}, icon: Icon(Icons.edit)),
IconButton(onPressed: (){}, icon: Icon(Icons.delete,color: Colors.red,))
],
),
);
}
if(fieldList[index]=='TextField'){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
SizedBox(
width: 400,
child: PreDefinedFields.textFieldCustom),
Spacer(),
IconButton(onPressed: (){}, icon: Icon(Icons.edit)),
IconButton(onPressed: (){}, icon: Icon(Icons.delete,color: Colors.red,))
],
),
);
}
if(fieldList[index]=='Button'){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
PreDefinedFields.elevatedButtonCustom,
Spacer(),
IconButton(onPressed: (){}, icon: Icon(Icons.edit)),
IconButton(onPressed: (){}, icon: Icon(Icons.delete,color: Colors.red,))
],
),
);
}
return Container();
})
),
),
)],
),
],
),
),
);
}
}