FlutterでYES/NOダイアログを作成する方法

目次

事前説明

Flutterの「AlertDialog」を元に、コンポーネント化したYES/NOダイアログの作り方、使い方を記載します。

コンポーネントのソースコードの全量

コンポーネントのソースコードの全量は以下です。

import 'package:flutter/material.dart';

class YesNoDialog extends StatelessWidget {
  final String title;
  final String message;
  final Function() onYesAction;
  const YesNoDialog(
      {required this.title, required this.message, required this.onYesAction});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(title),
      content: Text(message),
      actions: <Widget>[
        GestureDetector(
          child: new Container(
            padding:
                const EdgeInsets.only(top: 16, right: 8, bottom: 16, left: 16),
            child: Text('いいえ'),
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        GestureDetector(
          child: new Container(
            padding:
                const EdgeInsets.only(top: 16, right: 16, bottom: 16, left: 8),
            child: Text('はい'),
          ),
          onTap: () {
            onYesAction();
          },
        )
      ],
    );
  }
}

使い方（呼び出し方）

ボタン押下時の処理などで、以下のように呼び出す事ができます。

showDialog<void>(
  context: context,
  builder: (_) {
    return YesNoDialog(
      title: "タイトル",
      message: "ダイアログメッセージ",
      onYesAction: () {
        print("ボタン押下");
      }
    );
  }
);