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.

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;

  @override
  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.

Demo