Here is how you can implement the swipe-to-dismiss pattern in ListViews of a Flutter applications.
Swipe to delete is a common UI pattern in mobile applications. The user swipes an element in a direction and the system reacts with an action. Common use cases include removing entries from lists or making toast notifications disappear, for example.
In this short article, I will show you how to implement the pattern in a
ListView of a Flutter application.
Here is the entire source code of this example:
The important part of our page is the
ListView. Its items are wrapped in a
Dismissible widget that handles all logic needed. Every entry needs a unique
key so that it can be dismissed properly.
Here are some properties that the
Dismissible widget offers:
onDismissed – what will happen when an item is dismissed
confirmDismiss – happens just before
onDismissed occurs. You can use it for a confirmation dialog, for example.
direction – the allowed directions the user can swipe to
background – in case you want to style the background of the swiped element
And here is a short demo of how this can look like:
The swipe-to-dismiss pattern is easy to implement and one of the most basic pattern in mobile applications. With this guide, you should be able to implement it in your apps.