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.

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).

 

Author: Natalie Masse Hooper

Mobile app developer with 14 years experience. Started with the Android SDK in 2010 and switched to Flutter in 2017. Past apps range from start ups to large tech (Google) and non tech (British Airways) companies, in various sectors (transport, commercial operations, e-commerce).

4 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.

  1. It is pretty much helpful. I have a doubt. Since list is used here we can decrement the size but how to do the same with JSON. Even if we delete this item, when ever the app reloads it fetch the JSON again and it also showing the deleted results. Any help on this will be appreciated.
    Thank you.

    1. The items are hardcoded in init() of the repository as this is an example app. In reality, you would load the items from a db or a backend, and when you delete one item, you would delete it there as well (instead of just deleting it from the in memory list only – in delete(Item item) method in list_data.dart file).

Leave a Reply

Your email address will not be published.