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!

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

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. 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 doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

Leave a Reply

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