Swipe to dismiss is a popular feature in Mobile apps. For most known example is email apps like Gmail, Outlook, etc. Most popular apps have this feature. So, In this blog, we will implement the Swipe to dismissable listview in Flutter. let’s get started. The source code link will be given.
Table of Contents
Create a Project
If you are starting from scratch, create a new project using the IDE or flutter create command. if you have an existing project skip this step.
flutter create your_app_name
Create a model class
First, create a model class for listview as per your need. An example is given below,
class MailModel {
String title;
String desc;
String time;
MailModel({required this.title, required this.desc, required this.time});
}
Create a data source
In this example, I am using a dummy list of data. Example,
static List<MailModel> mailList = [
MailModel(
title: "Dismissible Widget",
desc: "This is the flutter dismissible widget tutorial",
time: "7.51 AM"),
MailModel(
title: "Drawer Widget",
desc:
"Flutter dismissible widget tutorial,Flutter dismissible widget tutorial ",
time: "6.31 AM"),
MailModel(
title: "Getx Tutorial",
desc:
"This is the flutter getx tutorial,Flutter dismissible widget tutorial",
time: "8.01 AM"),
MailModel(
title: "Custom Alert Dialog",
desc:
"Flutter Custom Alert Dialog tutorial,Flutter dismissible widget tutorial",
time: "2.51 PM"),
MailModel(
title: "Splash Screen",
desc:
"Flutter Splash Screen tutorial,Flutter dismissible widget tutorial",
time: "2.51 AM"),
];
Build the Item UI
Then create the item UI as per your need.
class MailItem extends StatelessWidget {
const MailItem({
required this.mails,
});
final MailModel mails;
Widget build(BuildContext context) {
return ListTile(
leading: Container(
height: 40,
width: 30,
color: Colors.red,
),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"${mails.title}",
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
Text(
"${mails.time}",
style: TextStyle(
fontSize: 12.0,
),
),
],
),
subtitle: Row(
children: [
Expanded(
child: Text(
"${mails.desc}",
maxLines: 2,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.star_outline,
color: Colors.grey,
),
),
],
),
);
}
}
Convert Data source into a list
The home page create the ListView.builder widget. In itemBuilder return the Dismissable widget.
ListView.builder(
itemCount: mails.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Dismissible(
key: UniqueKey(),
direction: DismissDirection.horizontal,
onDismissed: (direction) {
if (direction == DismissDirection.endToStart) {
setState(() {
mails.removeAt(index);
});
showSnakbar(context, 'Mail has beed deleted!');
} else if (direction == DismissDirection.startToEnd) {
showSnakbar(context, 'Mail has beed Archived!');
}
},
background: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20.0),
color: Colors.blue,
child: Icon(Icons.archive_outlined, color: Colors.white),
),
secondaryBackground: Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 20.0),
color: Colors.redAccent,
child: Icon(Icons.delete, color: Colors.white),
),
child: MailItem(mails: mails[index]),
);
},
),
Dismissable Widget Properties
Some important properties of Dismissable Widget
- background – The background widget is visible when you swipe left to right.
- secondaryBackground – secondaryBackground widget is visible when you swipe right to left.
- onDismissed – The onDismissed method is called when the list item is swiped.
- confirmDismiss: We can integrate a user input for confirmation such as a dialog box prompting the user to delete or not.