Flutter: Deleting widget with delete icon from a list view in flutter - flutter

Question

I have a form builder application, I have stateless widgets which get added to list view, each widget has a delete icon, I want to delete the widget and update the list view.
one of the code widget code is this
class HeaderTextWidget extends StatelessWidget {
final VoidCallback onDelete;
HeaderTextWidget({Key key, this.onDelete}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 12.0),
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
topRight: Radius.circular(15.0),
topLeft: Radius.circular(15.0),
),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(6.0),
child: Text(
'Header',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
),
Card(
elevation: 5.0,
color: Colors.blueGrey.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 10.0, 8.0, 10.0),
child: TextField(
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.text,
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
decoration: InputDecoration(
hintText: 'untitled header',
hintStyle: TextStyle(
color: Colors.grey,
fontStyle: FontStyle.italic,
fontSize: 14.0,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 20.0),
child: TextField(
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.text,
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.normal,
),
decoration: InputDecoration(
hintText: 'Description (optional)',
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 14.0,
),
),
),
),
Divider(
indent: 4.0,
endIndent: 4.0,
thickness: 2.0,
),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
IconButton(
icon: Icon(Icons.content_copy),
iconSize: 24.0,
color: Colors.blue,
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('COpy'),
),
);
},
),
IconButton(
icon: Icon(Icons.delete),
iconSize: 24.0,
color: Colors.red,
onPressed: this.onDelete,
),
VerticalDivider(
thickness: 2.0,
endIndent: 6.0,
indent: 4.0,
),
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: SwitchWidget(),
),
],
),
),
],
),
),
],
),
);
}
}
This is my Listview builder
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
FormBuilder(
key: widget.fbKey,
autovalidate: true,
child: Expanded(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: ListView.builder(
itemCount: widget.data.widgets.length,
controller: _scrollController,
itemBuilder: (context, index) {
return widget.data.widgets[index];
},
),
),
)),
],
),
);
This is how the widget is being added the view is getting changed from selected the widget to List view builder page, when clicked on that particular icon. Where should be the delete function be added, in the List view or in the widget itself ?
Scaffold(
appBar: AppBar(
title: Text('Form Widgets'),
),
body: LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewPointConstrainsts) {
return SingleChildScrollView(
padding: EdgeInsets.all(12.0),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewPointConstrainsts.maxHeight,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FormWidget(
key: UniqueKey(),
iconData: Icons.title,
widgetTxT: 'Header',
onTap: () {
setState(() {
widget.data.widgets.add(HeaderTextWidget());
widget.pickWidgetsView = false;
});
},
),

Answer 1

Try the following approach:
Store only the data, not the Widget itself in the list
List<DataModel> data = []
Create list view item using createListViewItem() which should return widget as the following
ListView.builder(
itemCount: widget.dataList.length,
controller: _scrollController,
itemBuilder: (context, index) {
return createListViewItem(index);
},
),
Now inside createListViewItem(index) you can create data as per widget.dataList[index] and delete the list item on click of delete icon
setState(){
widget.dataList.deleteAt(index);
}

Answer 2

Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButton(
items: _Mothe.map(
(String dropdownMenuItem) {
return DropdownMenuItem<String>(
value: dropdownMenuItem,
child: Text(dropdownMenuItem),
);
},
).toList(),
onChanged: (String? value) {
setState(
() {
name == value!;
},
);
},
value: name,
isExpanded: true,
icon: SizedBox(),
),
],
),
);
}