Dismissible for swipe actions in Flutter

Introduction

Dismissible lets users swipe to remove items from a list. It makes apps feel interactive and easy to use.

You want users to delete emails by swiping left or right.

You have a to-do list and want users to remove tasks quickly.

You want to confirm actions by swiping on notifications.

You want to add fun swipe gestures to clear items in a shopping cart.

Syntax

Flutter

Dismissible(
  key: Key('unique_key'),
  onDismissed: (direction) {
    // action when dismissed
  },
  child: WidgetToDismiss,
)

The key must be unique to identify the widget.

onDismissed runs when the user finishes the swipe.

Examples

Basic dismissible with a print action on swipe.

Flutter

Dismissible(
  key: Key('item1'),
  onDismissed: (direction) {
    print('Item dismissed');
  },
  child: ListTile(title: Text('Swipe me')),
)

Adds a red background visible while swiping.

Flutter

Dismissible(
  key: Key('item2'),
  background: Container(color: Colors.red),
  onDismissed: (direction) {
    // Remove item from list
  },
  child: ListTile(title: Text('Swipe to delete')),
)

Sample App

This app shows a list of 5 items. Swipe left or right on any item to remove it. A red background with a trash icon appears while swiping. After dismissal, a message appears at the bottom.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Dismissible Demo')),
        body: const DismissibleList(),
      ),
    );
  }
}

class DismissibleList extends StatefulWidget {
  const DismissibleList({super.key});

  @override
  State<DismissibleList> createState() => _DismissibleListState();
}

class _DismissibleListState extends State<DismissibleList> {
  final List<String> items = List<String>.generate(5, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return Dismissible(
          key: Key(item),
          background: Container(color: Colors.red, alignment: Alignment.centerLeft, padding: const EdgeInsets.only(left: 20), child: const Icon(Icons.delete, color: Colors.white)),
          secondaryBackground: Container(color: Colors.red, alignment: Alignment.centerRight, padding: const EdgeInsets.only(right: 20), child: const Icon(Icons.delete, color: Colors.white)),
          onDismissed: (direction) {
            setState(() {
              items.removeAt(index);
            });
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('$item dismissed')));
          },
          child: ListTile(title: Text(item)),
        );
      },
    );
  }
}

Important Notes

Always provide a unique key for each Dismissible widget to avoid errors.

You can customize the swipe background using background and secondaryBackground for left and right swipes.

Use onDismissed to update your data source and UI after an item is swiped away.

Summary

Dismissible lets users swipe to remove items easily.

Provide a unique key and handle onDismissed to update your list.

Customize swipe backgrounds to improve user experience.