Open In App

Flutter – Implementing Swipe to Dismiss Feature

Improve
Improve
Like Article
Like
Save
Share
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 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:



Last Updated : 22 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads