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

Introduction

Here is how you can implement the swipe-to-dismiss pattern in ListViews of a Flutter applications. It takes 5 minutes to implement it.

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:

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.

Related articles

How to add a Google Map to your Flutter app

In this article, we are adding a Google Maps widget to our app and use location services to display our current position.

Clean Code, Happy Developer: How to use Linters in Your Flutter App Development Workflow

Here is how you add and use linters in your Flutter app to enhance and maintain higher code quality.

A comparison of 6 JsonToDart tools for Flutter/Dart developers

Instead of writing code yourself, you can always use generators to create Dart model classes from JSON. Here are the results of my evaluation of some free tools for you.