Dismissible Widget In Flutter

In Flutter, if you need to create a widget that can be dismissed, you can wrap the widget as the child of Dismissible. Dismissible Widget in flutter is usually used to wrap each list item so that it can be dismissed, either horizontally or vertically. I’m going to give you some examples of how to use the widget, including how to show the confirmation dialog, set backgrounds that will be shown when the child is being dismissed, and set dismiss direction.

You can also check out our Flutter app development services for more Flutter app development.

A widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the DismissDirection causes the child to slide out of view.

Let’s focus on Dismissible Widget In Flutter

const Dismissible({
    @required Key key,
    @required this.child,
    this.background,
    this.secondaryBackground,
    this.confirmDismiss,
    this.onResize,
    this.onDismissed,
    this.direction = DismissDirection.horizontal,
    this.resizeDuration = const Duration(milliseconds: 300),
    this.dismissThresholds = const <DismissDirection, double>{},
    this.movementDuration = const Duration(milliseconds: 200),
    this.crossAxisEndOffset = 0.0,
    this.dragStartBehavior = DragStartBehavior.start,
  })

const Dismissible({

@required Key key,

@required this.child,

this.background,

this.secondaryBackground,

this.confirmDismiss,

this.onResize,

this.onDismissed,

this.direction = DismissDirection.horizontal,

this.resizeDuration = const Duration(milliseconds: 300),

this.dismissThresholds = const <DismissDirection, double>{},

this.movementDuration = const Duration(milliseconds: 200),

this.crossAxisEndOffset = 0.0,

this.dragStartBehavior = DragStartBehavior.start,

})

You must pass the key (Key) and the child (Widget). Since the widget might be deleted from the widget list, key becomes crucial. Make sure each dismissible widget has a different key if there are numerous ones. Avoid using index as a key since dismissing one widget may alter the index of other widgets. The second necessary property is kid, where you must pass a dismissible widget.

The onDismissed property is another crucial one. It’s a callback function that takes one DismissDirection parameter.

For instance, we’re going

List<String> items = ["Wine", "Vodka", "Whisky","Beer"];

1	List<String> items = ["Wine", "Vodka", "Whisky","Beer"];

Here’s the code for building the `ListView`

The itemBuilder, which is used to build the list items, returns a Dismissible. In addition of the required arguments (key and child), onDismissed callback is also passed. The below example shows you how to set different action for each direction.

ListView.separated(
    itemCount: _values.length,
    padding: const EdgeInsets.all(5.0),
    separatorBuilder: (context, index) => Divider(
      color: Colors.black,
    ),
    itemBuilder: (context, index) {
      return Dismissible(
        key: Key('item ${_values[index]}'),
        onDismissed: (DismissDirection direction) {
          if (direction == DismissDirection.startToEnd) {
            print("Add to favorite");
          } else {
            print('Remove item');
          }
 
          setState(() {
            _values.removeAt(index);
          });
        },
        child: ListTile(
          leading: Icon(Icons.local_activity, size: 50),
          title: Text(_values[index]),
          subtitle: Text('Description here'),
        ),
      );
    }
  ),

ListView.separated(

itemCount: _values.length,

padding: const EdgeInsets.all(5.0),

separatorBuilder: (context, index) => Divider(

color: Colors.black,

itemBuilder: (context, index) {

return Dismissible(

key: Key('item ${_values[index]}'),

onDismissed: (DismissDirection direction) {

if (direction == DismissDirection.startToEnd) {

print("Add to favorite");

} else {

print('Remove item');

}

setState(() {

_values.removeAt(index);

});

child: ListTile(

leading: Icon(Icons.local_activity, size: 50),

title: Text(_values[index]),

subtitle: Text('Description here'),

);

}

Showing Confirmation

Dismissible is often used for delete action. If you think the performed action is crucial and cannot be undone, it’s better to show confirmation before the action defined inside onDismissed is performed. You can do it by passing confirmDismissCallback to the constructor. It’s a callback that accepts one parameter of type DismissDirection and returns Future<bool>. The below example shows an AlertDialog where the user can confirm to delete the item or cancel the action.

confirmDismiss: (DismissDirection direction) async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Delete Confirmation"),
          content: const Text("Are you sure you want to delete this item?"),
          actions: <Widget>[
            FlatButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: const Text("Delete")
            ),
            FlatButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text("Cancel"),
            ),
          ],
        );
      },
    );
  }

confirmDismiss: (DismissDirection direction) async {

return await showDialog(

context: context,

builder: (BuildContext context) {

return AlertDialog(

title: const Text("Delete Confirmation"),

content: const Text("Are you sure you want to delete this item?"),

actions: <Widget>[

FlatButton(

onPressed: () => Navigator.of(context).pop(true),

child: const Text("Delete")

FlatButton(

onPressed: () => Navigator.of(context).pop(false),

child: const Text("Cancel"),

);

}

Setting Backgrounds

The default dismiss direction is horizontal. You can swipe to the right or left. Swiping to left or right may end up in a different action depending on what you define in onDismissed callback. Not only different actions, Flutter allows you to set different widgets that will be shown when the child is being dismissed. Use background to define the widget to be displayed when the child is swiped to the right and secondaryBackground for the widget when the child is swiped to the left. If you only set background, it will be used for both directions.

  background: Container(
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: Row(
                  children: const [
                    Icon(Icons.favorite, color: Colors.white),
                    SizedBox(width: 8.0,),
                    Text('Move to favorites', style: TextStyle(color:               Colors.white)),
                  ],
                ),
              ),
            ),
            secondaryBackground: Container(
              color: Colors.red,
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: const [
                    Icon(Icons.delete, color: Colors.white),
                    SizedBox(width: 8.0,),
                    Text('Move to trash', style: TextStyle(color: Colors.white)),
                  ],
                ),
              ),
            ),

background: Container(

color: Colors.blue,

child: Padding(

padding: const EdgeInsets.all(15),

child: Row(

children: const [

Icon(Icons.favorite, color: Colors.white),

SizedBox(width: 8.0,),

Text('Move to favorites', style: TextStyle(color: Colors.white)),

secondaryBackground: Container(

color: Colors.red,

child: Padding(

padding: const EdgeInsets.all(15),

child: Row(

mainAxisAlignment: MainAxisAlignment.end,

children: const [

Icon(Icons.delete, color: Colors.white),

SizedBox(width: 8.0,),

Text('Move to trash', style: TextStyle(color: Colors.white)),

Below is the Dismissible Widget In Flutter code that you can copy if you want to try the code in this tutorial. This includes the confirmation modal and different backgrounds for each direction.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dismissible Widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ["Wine", "Vodka", "Whisky","Beer"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Dismissible Widget"),
      ),
      body: ListView.builder(
        itemCount: items.length,
        padding: const EdgeInsets.symmetric(vertical: 16),
        itemBuilder: (BuildContext context, int index) {
          return Dismissible(
            background: Container(
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: Row(
                  children: const [
                    Icon(Icons.favorite, color: Colors.white),
                    SizedBox(width: 8.0,),
                    Text('Move to favorites', style: TextStyle(color: Colors.white)),
                  ],
                ),
              ),
            ),
            secondaryBackground: Container(
              color: Colors.red,
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: const [
                    Icon(Icons.delete, color: Colors.white),
                    SizedBox(width: 8.0,),
                    Text('Move to trash', style: TextStyle(color: Colors.white)),
                  ],
                ),
              ),
            ),
            key: ValueKey<String>(items[index]),
            onDismissed: (DismissDirection direction) {setState(() {items.removeAt(index);});},
              confirmDismiss: (DismissDirection direction) async {
              if(direction == DismissDirection.startToEnd ){
                return await showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: const Text("Add Gift to Cart"),
                      content: const Text("Are you sure you want to add this gift in your cart"),
                      actions: <Widget>[
                        FlatButton(
                            onPressed: () => Navigator.of(context).pop(true),
                            child: const Text("Yes")
                        ),
                        FlatButton(
                          onPressed: () => Navigator.of(context).pop(false),
                          child: const Text("No"),
                        ),
                      ],
                    );
                  },
                );
              }else{
                return await showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: const Text("Remove Gift"),
                      content: const Text("Are you sure you want to remove this gift item?"),
                      actions: <Widget>[
                        FlatButton(
                            onPressed: () => Navigator.of(context).pop(true),
                            child: const Text("Yes")
                        ),
                        FlatButton(
                          onPressed: () => Navigator.of(context).pop(false),
                          child: const Text("No"),
                        ),
                      ],
                    );
                  },
                );
              }
              },
            child: ListTile(
              leading: const Icon(Icons.card_giftcard),
              title: Text(items[index]),
              subtitle: const Text("This Gift is For you"),
            ),
          );
        },
      )
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Dismissible Widget',

theme: ThemeData(

primarySwatch: Colors.blue,

debugShowCheckedModeBanner: false,

home: const MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

List<String> items = ["Wine", "Vodka", "Whisky","Beer"];

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Dismissible Widget"),

body: ListView.builder(

itemCount: items.length,

padding: const EdgeInsets.symmetric(vertical: 16),

itemBuilder: (BuildContext context, int index) {

return Dismissible(

background: Container(

color: Colors.blue,

child: Padding(

padding: const EdgeInsets.all(15),

child: Row(

children: const [

Icon(Icons.favorite, color: Colors.white),

SizedBox(width: 8.0,),

Text('Move to favorites', style: TextStyle(color: Colors.white)),

secondaryBackground: Container(

color: Colors.red,

child: Padding(

padding: const EdgeInsets.all(15),

child: Row(

mainAxisAlignment: MainAxisAlignment.end,

children: const [

Icon(Icons.delete, color: Colors.white),

SizedBox(width: 8.0,),

Text('Move to trash', style: TextStyle(color: Colors.white)),

key: ValueKey<String>(items[index]),

onDismissed: (DismissDirection direction) {setState(() {items.removeAt(index);});},

confirmDismiss: (DismissDirection direction) async {

if(direction == DismissDirection.startToEnd ){

return await showDialog(

context: context,

builder: (BuildContext context) {

return AlertDialog(

title: const Text("Add Gift to Cart"),

content: const Text("Are you sure you want to add this gift in your cart"),

actions: <Widget>[

FlatButton(

onPressed: () => Navigator.of(context).pop(true),

child: const Text("Yes")

FlatButton(

onPressed: () => Navigator.of(context).pop(false),

child: const Text("No"),

);

}else{

return await showDialog(

context: context,

builder: (BuildContext context) {

return AlertDialog(

title: const Text("Remove Gift"),

content: const Text("Are you sure you want to remove this gift item?"),

actions: <Widget>[

FlatButton(

onPressed: () => Navigator.of(context).pop(true),

child: const Text("Yes")

FlatButton(

onPressed: () => Navigator.of(context).pop(false),

child: const Text("No"),

);

}

child: ListTile(

leading: const Icon(Icons.card_giftcard),

title: Text(items[index]),

subtitle: const Text("This Gift is For you"),

);

)

);

}

Properties

Here’s the list of properties of Dismissible you can pass to the constructor.

Key key *: The widget key, used to control if it should be replaced.
Widget child *: The widget below this widget in the tree.
Widget background: A widget stacked behind the child. If secondaryBackground is set, it’s only shown when the child is being dragged down or to the right.
Widget secondaryBackground: A widget stacked behind the child. It’s only shown when the child is being dragged up or to the left.
ConfirmDismissCallback confirmDismiss: Gives the app an opportunity to confirm or veto a pending dismissal.
VoidCallback onResize: A callback that will be called when the widget changes size.
DismissDirectionCallback onDismissed: A callback that will be called when the widget has been dismissed.
DismissDirection direction: The direction in which the widget can be dismissed. Defaults to DismissDirection.horizontal.
Duration resizeDuration: The amount of time the widget will spend contracting before onDismissed is called. Defaults to const Duration(milliseconds: 300).
Map<DismissDirection, double> dismissThresholds: The offset threshold the item has to be dragged in order to be considered dismissed. Defaults to const <DismissDirection, double>
Duration movementDuration: The duration to dismiss or back to original position if not dismissed. Defaults to const Duration(milliseconds: 200).
double crossAxisEndOffset: The end offset across the main axis after the card is dismissed. Defaults to 0.0.
DragStartBehavior dragStartBehavior: How the drag start behavior is handled. Defaults to DragStartBehavior.start.

That’s all for this Article 🎊 .

Conclusion

We learned about the Dismissible Widget in Flutter in this blog.

Visit the link for additional information on the Dismissible Widget in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

dismiss widget swipe widget

Parveen Baghel 28 April 2023

. . .

Dismissible Widget In Flutter

Let’s focus on Dismissible Widget In Flutter

Here’s the code for building the ListView

Showing Confirmation

Setting Backgrounds

Properties

Conclusion

Leave a Comment Cancel Reply

Message Sent!

Here’s the code for building the `ListView`