How To Add Swipe To Dismiss In Flutter Apps For A Better UX

Flutter category image

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:

Demo application using swipe to delete in a ListView of a Flutter application
Demo application using swipe to delete in a ListView of a Flutter application

Conclusion

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.