【Flutter】Dismissible でラップしたリストの項目をスワイプした際に確認ダイアログを表示する方法

Dismissible でラップした List の項目をスワイプした際に確認ダイアログを表示する方法を紹介します。

## 環境
- macOS 12.3.1 
- Flutter 2.8.1


## 実行結果

![confirm_dismiss.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559317/e3c90870-1b4a-4c86-194a-d1048c8906f7.gif)

## サンプルコード

``` dart
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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> list = [
    'アイテム１',
    'アイテム２',
    'アイテム３',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: Key(
              list[index],
            ),
            background: Container(
              padding: const EdgeInsets.only(
                right: 10,
              ),
              alignment: AlignmentDirectional.centerEnd,
              color: Colors.red,
              child: const Icon(
                Icons.delete,
                color: Colors.white,
              ),
            ),
            onDismissed: (direction) {
              // confirmDismiss の結果が true の時に実行される

              // 削除処理などを書く
            },
            confirmDismiss: (direction) async {
              return await showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text('確認'),
                    content: const Text('削除しますか'),
                    actions: [
                      SimpleDialogOption(
                        onPressed: () => Navigator.of(context).pop(true),
                        child: const Text('はい'),
                      ),
                      SimpleDialogOption(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: const Text('いいえ'),
                      ),
                    ],
                  );
                },
              );
            },
            child: ListTile(
              title: Text(list[index]),
            ),
          );
        },
      ),
    );
  }
}

```


## 解説

### confirmDismiss プロパティを使用する
スワイプ時に確認ダイアログを表示するためには`confirmDismiss`プロパティを使用します。
`confirmDismiss`の結果が`true`の時のみ`onDismissed`プロパティの処理が走るようになります。

### 確認ダイアログの返り値を指定する
確認ダイアログで選択した結果を返すために、Navigator.of(context).pop`の引数に`true/false`を指定します。

``` dart
confirmDismiss: (direction) async {
    return await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('確認'),
          content: const Text('削除しますか'),
          actions: [
            SimpleDialogOption(
              onPressed: () => Navigator.of(context).pop(true),
              child: const Text('はい'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text('いいえ'),
            ),
          ],
        );
      },
    );
  }
```

## 参考
https://stackoverflow.com/questions/55777213/flutter-how-to-use-confirmdismiss-in-dismissible