Have you ever used a smartphone and could swipe away or dismiss certain items on the screen? In Flutter, a powerful Dismissible widget lets you do just that in your app. It’s like giving your users the superpower of swiping away items with a simple touch!
With much applause, people still need clarification on what precisely dismissible features are offered in widgets.
We hope this article will assist you in the best possible way.
What is Dismissible in the Flutter App?
In simple terms, dismissible is the widget in Flutter that enables you to add swipe gestures within your application. It’s commonly used to build features like swiping to delete or archive items, similar to what you see in email or to-do list apps.
It allows the user to detect swipe gestures and perform actions accordingly. When a user swipes an item, the dismissible widget flutter takes care of the animation for you. It smoothly slides the item off the screen, giving users satisfying visual feedback. You can customize the animation by providing optional parameters like background, secondaryBackground, and direction.
How Does Dismissible Work?
To use Dismissible, you wrap it around the widget representing each item in your list. This can be any Flutter widget, such as ListTile, Card, or Container. Dismissible takes a few required parameters, including key and child.
- Key: Helps Flutter keep track of each item in the list uniquely.
- Child: Represents the widget that users will swipe to dismiss.
- onDismissed: Defines what happens when an item is swiped away. ( and it is an optional parameter )
Customizing Dismissible In Flutter
Customizing Background:
When using Dismissible in Flutter, you can customize the background behind the item as it’s being swiped from Left to Right. This background widget typically indicates that the item will be deleted or archived.
How to customize the background dismiss in Flutter?
To customize the background, you can utilize the background parameter of the Dismissible widget. This parameter accepts a widget of your choice, allowing you to design and style it to fit your app’s theme. You can use containers, images, icons, or any other widget to create the desired visual effect.
Customizing Secondary Background
In addition to the main background, Dismissible also allows you to specify a secondary background. This background appears when swiping the item in the Right to Left direction. It’s helpful to provide different actions based on the swipe direction.
How to specify secondary background?
To customize the secondary background, you can use the secondaryBackground parameter of the Dismissible widget. Like the background, this parameter accepts a widget that you can design and style to your liking.
A code example to show how you can customize background and secondaryBackground
Dismissible(
key: UniqueKey(),
background: Container(
width: double.infinity,
color: Colors.red,
height: 100,
),
secondaryBackground: Container(
width: double.infinity,
color: Colors.yellow,
height: 100,
),
child: const ListTile(
title: Text('Dismissible'),
trailing: Icon(Icons.add),
),
)
Here is the visual representation of how the code works:
Customizing Direction
By default, Dismissible in Flutter supports both left-to-right and right-to-left swipes. However, there may be cases where you want to limit the swipe direction to a specific orientation.
How to limit swipe direction to a specific direction in Flutter?
To limit the swipe direction, you can use the direction parameter of the Dismissible widget. This parameter takes a DismissDirection enum value, which allows you to specify the allowed swipe direction.
Utilizing these customization options allows you to create visually appealing and interactive swipe actions in your Flutter app. Customizing the background and secondaryBackground allows you to match your app’s design and provides clear indications of the actions users can take.
Also Read – Flutter gesturedetector mastering gestures guide
How to disable swiping in the dismissible widget in Flutter?
To disable swiping in a Dismissible widget in Flutter, set the direction parameter to DismissDirection.none.
With DismissDirection.none, the Dismissible widget won’t respond to swipe gestures, effectively disabling swiping in both left-to-right and right-to-left directions.
To disable swiping from right to left (start to end):
Dismissible( // other parameters... direction: DismissDirection.endToStart, // Disable swiping from right to left // child and onDismissed... )
To disable swiping from left to right (end to start):
Dismissible( // other parameters... direction: DismissDirection.startToEnd, // Disable swiping from left to right // child and onDismissed... )
5 Advantages of Dismissible Widget in Flutter
- Prevent accidental dismissals: A confirmDismiss parameter in Dismissible allows you to ask the user for approval before completing the dismissal action, which helps to avoid unintentional dismissals. This helps add an extra degree of security for users and helps prevent unintentional dismissals.
- Flexibility and Versatility: Dismissible can be used with various widgets, such as ListTile, Card, or Container, allowing you to incorporate swipe-to-dismiss functionality. Whether it’s a list of messages, tasks, or any other type of item, Dismissible can adapt to different scenarios and use cases.
- Enhanced User Experience: Dismissible allows users to interact with your app through intuitive swipe gestures, making the user experience more engaging and interactive.
- Simplified Implementation: Dismissible simplifies adding swipe gestures to your app. With just a few parameters and callbacks, you can enable swipe-to-dismiss functionality for individual list items or widgets without implementing complex gesture recognition logic from scratch.
- Animation Support: Dismissible includes built-in animations that smoothly slide the item off the screen when dismissed.
Conclusion
Using the Dismissible widget in Flutter enhances the user experience, simplifies implementation, provides customizable swipe actions, supports animations, offers flexibility, and promotes code reusability. It empowers developers to create user-friendly and interactive apps with swipe-to-dismiss functionality.
If you are a beginner and want a more intuitive app experience, you can hire Flutter developers to get an expert at your desk.
