FlutterでYES・Cancelの確認ダイアログを表示する方法

Flutterで「YES・Cancel」を選択する確認ダイアログを表示する方法について解説します。この記事では、標準パッケージのshowDialog 関数を使用してダイアログを表示する基本的な方法を使用します。

必要なパッケージ

この実装には特別なパッケージは必要ありません。Flutterの基本的なウィジェットであるMaterialパッケージを使用します。

Flutterで「YES・Cancel」ダイアログを表示する方法

ステップ 1: ボタンを作成

まず、ユーザーがタップするとダイアログが表示されるボタンを作成します。

ElevatedButton(
  onPressed: () async {
  
    //ダイアログの表示
    bool? result = await _showConfirmationDialog(context);
    
    if (result ?? false) {
      // YESがタップされた時の処理
    }
    
  },
  child: Text('確認ダイアログを表示'),
)

ステップ 2: ダイアログ表示関数を定義

次に、_showConfirmationDialog 関数を定義し、showDialog 関数を使用してダイアログを表示します。

/// 確認ダイアログを表示する
/// YESがタップされた時は「true」が戻り値として返る
/// Cancelまたは枠外をタップしてダイアログを時は「null」が戻り値として返る
Future<bool?> _showConfirmationDialog(BuildContext context) async {
  return await showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('確認'),
        content: Text('この操作を続けますか？'),
        actions: <Widget>[
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(false); // Cancelを選択
            },
            child: Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(true); // YESを選択
            },
            child: Text('YES'),
          ),
        ],
      );
    },
  );
}

枠外をタップした時にダイアログを閉じないようにする

まとめ

Flutterで「YES・Cancel」ダイアログを表示する方法の基本的な実装方法を紹介しました。
ダイアログを使った確認は頻繁に使うため、コンポーネント分割をして共通クラスにダイアログを実装しておくのも良いでしょう。