Implementing Swipe to Dismiss Feature Using Dismissible Widget - Flutter

You must have noticed a fantastic feature in the Gmail app by google .i.e swipe right to delete the mail.


The feature is popularly known as "swipe to dismiss feature".


This feature helps in better interaction with the user as compared to those traditional button clicks. Most of the applications that use List view in their UI has this.


Let's get into the detailed discussion about this feature, and I am going to teach you how you can implement this in Flutter.


If you are reading this article, I am assuming that you have some knowledge about Flutter and before starting with the article let me tell you that this is going to be the fifth article in the series Lit Flutter widgets. In this series, I'm talking about the most formidable and best Flutter widgets out there.


The widgets which have been discussed until now in the series are

1. CheckBoxTile widget
2. AnimateIcon widget
3. AboutDialog widget
4. Transform widget
5. Dismissble widget ( This article )

What is Dismissble Widget?

You can think of a Dismissible widget as a draggable piece of UI that has the ability to get dragged in any direction, causing the UI under it to slide out from the view.

Simple code for dismissible widget is

 Dismissible(  
  // Show a red background as the item is swiped away.  
  background: Container(color: Colors.red),  
  key: Key(item),  
  onDismissed: (direction) {  
   setState(() {  
    items.removeAt(index);  
   });  
   Scaffold  
     .of(context)  
     .showSnackBar(SnackBar(content: Text("$item dismissed")));  
  },  
  child: ListTile(title: Text('$item')),  
 );  

 

The essential arguments of the dismissible widgets are

1. Background - This is used to set the background which can be seen and used an indicator when the item is swiped away.
2. Key - Each dismissible widget must contain a key. The key allows Flutter to uniquely identify the item.
3. OnDismissed - This helps to provide the function that tells the app what to do with the app when it is swiped away.
4. Child - Child widget is used to showing the widget that is to swipe away.

Example Application

Let's see the usage of the code in the real application.

In this code

I first created a list of data and then converted it into a list using List.builder. Later I wrapped each item into Dismissible widget and returned it.

Then I handled all the functions that need to be carried after the item is dismissed in Dismissible widget.

For more info, you can watch the video made by the Flutter team here.

Conclusion

Time to look at what we actually learned. The dismissible widget can come handy whenever we need a swipe to perform some action in the application. In fact, it is much easier to learn about Dissmisible than designing your own widget and then defining gestures and callbacks to it. However, if you prefer this article, bookmark this URL to come at any later point of time if required.

Where else you can use a dismissible widget other than the list view?