Flutter, how to use confirmDismiss in Dismissible?

Question

What I have:

Dismissible(
    key: Key(state.threads[index].toString()),
    onDismissed: (direction) {
        setState(() {
            state.threads.removeAt(index);
        });
    },
);

Works fine. I can dismiss items with left swipe. However I'd want to confirm the action and what I understood and read I should use is

confirmDismiss:

However as a beginner and with lack of examples, plus the documentation literally explaining nothing for me that I understand. How to achieve this?

Answer 1

In the confirmDismiss attribute you can return an AlertDialog() (or whatever type of dialog you prefer) and then list the possible outcomes (e.g., delete and cancel) in buttons and return either true (delete) or false (cancel) which then determines if the item has to be removed or needs to stay in the list.

Example:

confirmDismiss: (DismissDirection direction) async {
  return await showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text("Confirm"),
        content: const Text("Are you sure you wish 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"),
          ),
        ],
      );
    },
  );
},

You can extract the logic into a method to make the code more readable.

Answer 2

I used the below code in a project where I could Archive or Delete notifications. @Yurij Kots answer along with the flutter interactive example found here Example from Flutter's Docs: CookBook

See image. If you pull right or left it shows you an underlying ICON that is below the item... telling you "what might happen"!

TO WATCH THE CODE WORK: Just past the entire code below at the link's interactive example coding space.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (i) => "Item ${i + 1} A B C D E... X Y Z");

  String whatHappened;

  @override
  Widget build(BuildContext context) {
    final title = 'Notification Items List';

return MaterialApp(
  title: title,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];

        return Dismissible(            
          key: Key(item),              
          onDismissed: (direction) {               
            setState(() {
              items.removeAt(index);
            });

            Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text("$item was $whatHappened")));
          },






confirmDismiss: (DismissDirection dismissDirection) async {
  switch(dismissDirection) {
    case DismissDirection.endToStart:
      whatHappened = 'ARCHIVED';
      return await _showConfirmationDialog(context, 'Archive') == true;
    case DismissDirection.startToEnd:
      whatHappened = 'DELETED';
      return await _showConfirmationDialog(context, 'Delete') == true;
    case DismissDirection.horizontal:
    case DismissDirection.vertical:
    case DismissDirection.up:
    case DismissDirection.down:
      assert(false);
  }
  return false;
},



          background: Container(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            color: Colors.red,
            alignment: Alignment.centerLeft,
            child: Icon(Icons.cancel),
          ),
          secondaryBackground: Container(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            color: Colors.green,
            alignment: Alignment.centerRight,
            child: Icon(Icons.check),
          ),



          child: ListTile(title: Text('$item')),
        );
      },
    ),
  ),
);
  }
}

Future<bool> _showConfirmationDialog(BuildContext context, String action) {
  return showDialog<bool>(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Do you want to $action this item?'),
        actions: <Widget>[
          FlatButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.pop(context, true); // showDialog() returns true
            },
          ),
          FlatButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.pop(context, false); // showDialog() returns false
            },
          ),
        ],
      );
    },
  );
}

Answer 3

Here is an example from the flutter repo.

Tested on 1.12 version of flutter.

Future<bool> _showConfirmationDialog(BuildContext context, String action) {
  return showDialog<bool>(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Do you want to $action this item?'),
        actions: <Widget>[
          FlatButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.pop(context, true); // showDialog() returns true
            },
          ),
          FlatButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.pop(context, false); // showDialog() returns false
            },
          ),
        ],
      );
    },
  );
}

Add inside Dismissible widget:

confirmDismiss: (DismissDirection dismissDirection) async {
  switch(dismissDirection) {
    case DismissDirection.endToStart:
      return await _showConfirmationDialog(context, 'archive') == true;
    case DismissDirection.startToEnd:
      return await _showConfirmationDialog(context, 'delete') == true;
    case DismissDirection.horizontal:
    case DismissDirection.vertical:
    case DismissDirection.up:
    case DismissDirection.down:
      assert(false);
  }
  return false;
}