flutterlistviewflutter-listviewflutter-list-tile

listview and dismissable not animating a listtiles background correctly when removing an item


im having an issue with the Listview Builder in Flutter. Im using dismissible to remove items from that listview. When removing an item, the other items don't animate correctly. The text "goes up" first, then the background follows when the text "arrived", they are not grouped together. Im using tileColor to give the tiles the background color.

Expanded(
  child: ListView.builder(
    itemCount: todos.length,
    itemBuilder: (context, index) {
      return Dismissible(
        key: Key(todos[index]),
        onDismissed: (direction) {
          setState(() {
            todos.removeAt(index);
            checkboxState.removeAt(index);
          });
        },
        child: ListTile(
          tileColor: primaryColor,
          title: Text(
            todos[index],
          ),
        ),
      );
    },
  ),
),

current behaviour


Solution

  • Wrap the ListTile in a Container. To get it to work without any errors, I had to change the parent widgets a bit.

    https://dartpad.dev/?id=fbf33754690228837d788e8c0a5c0ec9

    return Scaffold(
          appBar: AppBar(
            title: const Text('Todo List'),
            backgroundColor: primaryColor,
          ),
          body: ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, index) {
              return Dismissible(
                key: Key(todos[index]),
                onDismissed: (direction) {
                  setState(() {
                    todos.removeAt(index);
                    checkboxState.removeAt(index);
                  });
                },
                child: Container(
                  color: primaryColor,
                  child: ListTile(title: Text(todos[index])),
                ),
              );
            },
          ),
        );