I'm using a Dismissible widget to allow users to delete tasks from a ListView. However, the red background of the Dismissible is larger than the actual card size, causing extra spacing between the list items.
Here's my current code for rendering each item:
Widget _dismissibleCard(Task task) {
return Dismissible(
key: UniqueKey(),
background: Container(
alignment: Alignment.centerRight,
color: Colors.red,
child: Icon(
Icons.delete,
color: white,
size: 30,
),
),
child: CustomCard(
title: task.taskDetail,
subtitle: task.taskDetail,
cardColor: cardColor),
onDismissed: (direction) async {
await service.removeTasks(task.key!);
setState(() {
taskList.remove(task);
});
},
);
}
I have tried:
You can remove all the fixed height;
Widget get _listView => ListView.builder(
itemCount: taskList.length,
itemBuilder: (context, index) => _dismissibleCard(
taskList[index],
),
);
Also from _dismissibleCard
Widget _dismissibleCard(Task task) {
return Dismissible(
key: UniqueKey(),
background: Container(
alignment: Alignment.centerRight,
color: Colors.red,
child: Icon(Icons.delete, color: white),
),
child: SizedBox(
child: CustomCard(title: task.taskDetail, subtitle: task.taskDetail, cardColor: cardColor),
),
onDismissed: (direction) async {
await service.removeTasks(task.key!);
setState(() {
taskList.remove(task);
});
},
);
}