Dismissible is a widget that can be dismissed by dragging in the desired direction. We can swipe an element to left or right and dismiss it from the list. We can consider the example of a list of messages, where we can swipe any mail to left or right to dismiss it indicating we have deleted it.

Syntax

The dismissible can be inserted in a ListView or similar widget. The widget has two required parameters that are:- key and child.

Dismissible(key: key, child: child),

• key: Here we pass the key of this widget because it needs to be distinguished from the other widgets. We can pass here the ValueKey when the Dismissible widget is in the ListView

• child: Here we pass a widget to be rendered.

Simple Dismissible Inside ListView.builder()

First, create a list with some elements.

 List<String> myItems = List.generate(20, (index) => "Item $index");

Now create the ListView.builder() widget and build Dismissible widgets.

ListView.builder(
itemCount: myItems.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: ValueKey<int>(index),
      child: ListTile(
        title: Text(myItems[index]),
      ),
    );
  },
),

Output

Other Essential Parameters

• background: Here we pass the widget that should be displayed when the user dismisses the widget.

• secondaryBackground: This is another background which is displayed when the item is dragged to up or left.

• confirmDismiss: This is a callback function that is called when the user dismisses the Dismissible widget. The return type of widget is boolean. This asks that whether the widget should be dismissed or not. This is a use case where we will display an AlertDialog and ask the user for confirmation.

• crossAxisEndOffset: This asks the end offset across the main axis when the user dismissed the widget.

• direction: It is direction where when dragged the item is dismissed. The default value is horizontal. The following are different types:-

  • down

  • up

  • endToStart

  • startToEnd

  • horizontal

  • vertical

  • none

Custom Draggable

class DismissibleTutorial extends StatefulWidget {
  const DismissibleTutorial({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _DismissibleTutorialState createState() => _DismissibleTutorialState();
}

class _DismissibleTutorialState extends State<DismissibleTutorial> {
  List<String> myItems = List.generate(20, (index) => "Item $index");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: myItems.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: ValueKey<int>(index),
            child: ListTile(
              title: Text(myItems[index]),
            ),
            background: Container(color: Colors.red),
            direction: DismissDirection.startToEnd,
            secondaryBackground: Container(
              color: Colors.green,
            ),
          );
        },
      ),
    );
  }
}