Open In App

Flutter - Implementing Swipe to Dismiss Feature

Last Updated : 02 Aug, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The Swipe to dismiss feature is used by us in many mobile apps. In this article, we will create a list of items and implement a swipe to dismiss in it. When we want to dismiss the content using a swipe, we can do this with the help of the swipe to dismiss widget in Flutter.

Steps to Implement Swipe to Dismiss Feature

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Start Coding

Use the code below in the main.dart file :

main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Swipe to dismiss',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyPage extends StatelessWidget {
  final List<String> items =
  new List<String>.generate(80, (i) => "Item ${i + 1}");
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.lightBlue[50],
      appBar: new AppBar(
        title: new Text("Swipe to dismiss"),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Text("GFG", textScaleFactor: 3),
        ],
      ),
      body: new ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, int index) {
          return new Dismissible(
            key: new Key(items[index]),
            onDismissed: (direction) {
              items.removeAt(index);
              Scaffold.of(context).showSnackBar(
                  new SnackBar(content: new Text("Item dismissed successfully")));
            },
            background: new Container(
              color: Colors.red,
            ),
            child: Container(
              child: new ListTile(
                leading: Icon(Icons.list),
                title: new Text("GFG " + "${items[index]}"),
                trailing: Icon(Icons.done_all,color: Colors.green,),
              ),
            ),
          );
        },
      ),
    );
  }
}

Explanation:

  • Create a list of items.
  • Build Dismissible using itemBuilder.
  • Perform onDismissed operations on list items.

Output:

When any list item is swiped, it gets deleted, and when the item is dismissed from the list, a Snackbar with the message "Item dismissed successfully" will be shown as below:


Implementing Swipe to Dismiss Feature in Flutter

Similar Reads