Flutter — Swipe Left to Delete

The feature swipe left to delete item in List View was introduced by iOS, and now become widely common feature for both Android and iOS. In this article we will learn how to implemented this feature on Flutter using Dismissible Widget.

For starter, we need to create UI with ListView. If you interested to create the ListView from scratch, please refer to ListView series tutorial. Otherwise, I have created the base code and can be downloaded from Github.

Now, we need to make change on the ListView.builder. Instead of returning ListTile, it should return Dismissible. There are 4 Dissmissible properties here :

1. Key : Controls how one widget replaces another widget in the tree.
2. Direction : The direction in which the widget can be dismissed. In our case, since we want it from Right to Left, we should set it to DissmissDirection.endToStart
3. OnDismissed : It will contain all the action that we want to be happened when the widget has been dismissed, after finishing resizing.
4. Child : The widget bellow in this tree.In our case we should put the ListTile that we wrote earlier.

return Dismissible(
  key: Key(items[index]),
  direction: DismissDirection.endToStart,
  onDismissed: (direction) {
    int i = index+1;
    setState(() {
      items.removeAt(index);
    });
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('items $i is dismissed'),
    ));
  },
  child: ListTile(title: Text(items[index])),
);

If you implemented it properly, it should shown as bellow gif

And that is it. We have implemented this feature efficiently. Complete code on this article can be downloaded from my Github. Thanks!