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

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

環境

• macOS 12.3.1
• Flutter 2.8.1

実行結果

サンプルコード

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`を指定します。

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('いいえ'),
            ),
          ],
        );
      },
    );
  }

参考