flutterflutter-listviewdismissible

Flutter Dismissible widget causes extra spacing between ListView items


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:

enter image description here

image


Solution

  • 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);
            });
          },
        );
      }