Flutter – Implementing Swipe to Dismiss Feature

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 swipe then we can do this with the help of swipe to dismiss widget in a flutter. Generally, we use this when we have a list of items and when we want to delete a task then we simply dismiss it using left swipe or right swipe. In this article, we have created a list of items using ListView.builder. When an item is dismissed then Snackbar will be displayed showing a message “Item dismissed successfully”.

Follow the below steps to implement swipe to dismiss:

Step 1: Create a new flutter application.

flutter create <YOUR_APP_NAME>

Step 2: Delete the default code from the main.dart file.

Step 3: Create a list of items as shown below in main.dart file.

Step 4: Use the below code in the main.dart file :

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 we build a list of items, it will result:

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: