Dismissible Widget In Flutter


In Flutter, if you need to create a widget that can be dismissed, you can wrap the widget as the child of DismissibleDismissible Widget in flutter is usually used to wrap each list item so that it can be dismissed, either horizontally or vertically. I’m going to give you some examples of how to use the widget, including how to show the confirmation dialog, set backgrounds that will be shown when the child is being dismissed, and set dismiss direction.

You can also check out our Flutter app development services for more Flutter app development.

widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the DismissDirection causes the child to slide out of view.

Let’s focus on Dismissible Widget In Flutter

You must pass the key (Key) and the child (Widget). Since the widget might be deleted from the widget list, key becomes crucial. Make sure each dismissible widget has a different key if there are numerous ones. Avoid using index as a key since dismissing one widget may alter the index of other widgets. The second necessary property is kid, where you must pass a dismissible widget.

The onDismissed property is another crucial one. It’s a callback function that takes one DismissDirection parameter.

For instance, we’re going

Here’s the code for building the ListView

The itemBuilder, which is used to build the list items, returns a Dismissible. In addition of the required arguments (key and child), onDismissed callback is also passed. The below example shows you how to set different action for each direction.

Showing Confirmation

Dismissible is often used for delete action. If you think the performed action is crucial and cannot be undone, it’s better to show confirmation before the action defined inside onDismissed is performed. You can do it by passing confirmDismissCallback to the constructor. It’s a callback that accepts one parameter of type DismissDirection and returns Future<bool>. The below example shows an AlertDialog where the user can confirm to delete the item or cancel the action.

Setting Backgrounds

The default dismiss direction is horizontal. You can swipe to the right or left. Swiping to left or right may end up in a different action depending on what you define in onDismissed callback. Not only different actions, Flutter allows you to set different widgets that will be shown when the child is being dismissed. Use background to define the widget to be displayed when the child is swiped to the right and secondaryBackground for the widget when the child is swiped to the left. If you only set background, it will be used for both directions.

Below is the Dismissible Widget In Flutter code that you can copy if you want to try the code in this tutorial. This includes the confirmation modal and different backgrounds for each direction.


Here’s the list of properties of Dismissible you can pass to the constructor.

That’s all for this Article 🎊 .


We learned about the Dismissible Widget in Flutter in this blog.

Visit the link for additional information on the Dismissible Widget in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

. . .

Leave a Comment

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

Be the first to comment.


Great Product, Great Team, and Great Support Service. And if you want to add more features to the product, they can submit any idea that comes to your mind. They really care about their clients and we are really happy and honored to deal with Webkul.

Talk to Sales


Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home