How to implement swipe to dismiss in a list in Flutter

A fairly common UI action for lists in native apps is “swipe to dismiss”. That is, the user can swipe left, or right, and a leave-behind UI element indicates what will happen if the user continues on with swiping. Typically, the leave-behind element is a delete icon.

Flutter comes with a UI widget called Dismissible – as the name suggests, it enables us to implement this pattern. This code tutorial will show you how.

Displaying a list

For this code tutorial, we will set up an app with 2 screens. The first screen will show a list using ListTile, and the second will show a list using a custom widget.

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Firstly, we create a Material app in main.dart, which will launch the List1Page widget.

 

Secondly, we create a subpackage list and create list1_page.dart in it. It displays a simple list using ListTile. We also add an icon in the toolbar from where we show List2Page widget.

 

Thirdly, we create list2_page.dart. For the list item, we will reuse the UI setup in the example 3 of mastering Row and Column code tutorial.

 

Lastly, we add a subpackage data and create list_data.dart in it. Note: For simplification, we are setting up a repository with hardcoded data, as this code tutorial is about UI and not about architecturing a Flutter app.

 

Adding ‘swipe to dismiss’

To enable the user to “swipe to dismiss”, 3 things are required.

    • the list item widget must be wrapped in a Dismissible widget
    • as soon as onDismissed() is fired, the model must be updated to remove the actual item
    • the leave-behind widget (ie what is shown behind the list item being swiped) must be specified

Let’s start with the leave-behind widget. For this code tutorial, we allow both swiping left and right, so we need a widget that shows a delete icon on the left and on the right. How to do this? Well, our friend Row will help us (if Row isn’t your friend, check out our mastering Row and Column code tutorial). This will be used by both screens, so we define this in its own file leave_behind_view.dart, which we place in the subpackage list.

 

Then, we amend both list1_page.dart and list2_page.dart to add a Dismissible widget.

 

Lastly, we implement a new method to delete the item from the data repository in list_data.dart.

 

Voila!

Note: I am aware both delete icons are momentarily visible during the animation. It is less visible in the release apk but still visible. Any advice on this is more than welcome! Update: see first comment below.

Enjoying this code tutorial? Support the blog!

Options
 

What next?

Can you write an integration test to verify this pattern? Read How to write an integration test in Flutter then check out FlutterDriver.scroll (hint: to swipe horizontally, set a value for dx greater than 0).

 

 

Subscribe to my mailing list

Receive a monthly email with a curated list of the best 5 articles on software development I have come across during the month, as well as relevant blog updates such as new posts. The email is sent near the start of each month.
* indicates required

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

Author: Natalie Masse Hooper

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

2 thoughts on “How to implement swipe to dismiss in a list in Flutter”

    1. Thanks!

      You are indeed correct. ‘background’ for background when dragging to the right, and ‘secondaryBackground’ for background when dragging to the left. Not sure why I missed that when I wrote the tutorial, I’ll amend that. For now, I’ve added a reference to your comment.

Leave a Reply

Your email address will not be published. Required fields are marked *