Flutter: Swipe to Dismiss

Swipe an item to delete it using Dismissible widget

You might out have noticed swipe to dismiss feature in Gmail, this gives us a handy way to move the item to trash. In flutter, this can be easily done using Dismissible widget.

Courtesy of Dribbble

Getting Started!

Open your preferred IDE to work with. I’m using Visual Studio Code.
Let’s start with a boilerplate code and develop the basic UI of our app ‘Swipe to Dismiss’.

Notice that we have used StatefulWidget, because when we swipe an item it should be removed from the list and also updated in the UI. For the Scaffold area, which changes dynamically, we use StatefulWidget to handle the current state of the app.

App UI

Create a List of items

To implement swipe to dismiss feature, we are going to create a dummy list and display it in UI using ListView widget.

List<E>.generate constructor inputs the length and the contents to be filled in each item of the list. The index of an item starts from 0 to length-1.

Display the List using ListView widget

Now we are going to show this list in the app using ListView widget.

Add this to the body of our app Scaffold. And hot reload to see the list of items displayed in our app.

List of items displayed

As of now, we haven’t implemented dismissing feature. Let’s do it now.

Wrap each item in a Dismissible Feature

Dismissible class allows us to swipe each item.

1. Key — Each Dismissible widget should contain a Key to uniquely identify widgets
2. Background — The background of an item is set to red while performing dismissal action. This is called ‘Leave Behind’ indicator in Flutter.
3. Direction — Allows us to specify the direction to swipe, I have chosen the direction as endToStart.
4. onDismissed — It is a key player in making the action possible. The widget calls the onDismissed callback either after its size has collapsed to zero. Inside this, we can specify the actions to be performed on dismiss.
   a. On dismiss, we are calling the setState() function to remove that item from the list, this reloads the app and sets its new state.sdf
   b. We display the item deleted in the SnackBar for user’s knowledge.

Done! You now understand every component of our final app outcome.

Complete Code

Final UI

Just copy and paste it in your editor and run to see how it works.
So simple, right? 😉✌
Even smaller actions and animations like these give a better experience to the user while using the application.

If you find this tutorial useful, don’t forget to click/tap on the 👏 button as long as you can. :-) Would you like to appreciate my work? Buy Me A Cup Of Coffee! 😊 Follow to get more interesting tutorials on Flutter.
Other tutorials,

Working with APIs in Flutter

Saving data to Local Storage in Flutter

Happy Learning! ❤✔