Help us understand the problem. What is going on with this article?

[Flutter] ダイアログの種類と使い分け方をカチッとまとめる

Flutterのダイアログについてまとめます。

結論としては、こんな感じです。
・選択肢ダイアログ : SimpleDialog
・ボタンつきまたはカスタマイズ : AlertDialog
・それでも実現できない場合 : 新規ページにダイアログを実装する

Material編

SimpleDialog

SimpleDialog.png

SimpleDialogは、基本的に選択肢から選ぶようなダイアログの場合に使用します。
選択肢はSimpleDialogOptionを使って実装できます。

また、Dialogを表示する際にはshowDialog()メソッドを呼び出します。
これはDialogの種類に関わらず共通事項です。

showDialog(
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: Text("タイトル"),
      children: <Widget>[
        // コンテンツ領域
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context),
          child: Text("1項目目"),
        ),
          :
          :
      ],
    );
  },
);

→全文を見る

念のため、以下の公式のSimpleDialogの文章です。

A simple dialog offers the user a choice between several options.

(和訳)
"SimpleDialogで、ユーザーはいくつかのオプションから選択できます。"

AlertDialog

AlertDialog.png

タイトル、メッセージ、ボタンがある一般的なダイアログです。

showDialog(
  context: context,
  builder: (_) {
    return AlertDialog(
      title: Text("タイトル"),
      content: Text("メッセージメッセージメッセージメッセージメッセージメッセージ"),
      actions: <Widget>[
        // ボタン領域
        FlatButton(
          child: Text("Cancel"),
          onPressed: () => Navigator.pop(context),
        ),
        FlatButton(
          child: Text("OK"),
          onPressed: () => Navigator.pop(context),
        ),
      ],
    );
  },
);

→全文を見る

また、ある程度カスタマイズしたダイアログも実装できます。
その際には、SingleChildScrollViewなどを使用することが推奨されています。

その中で、ColumnやRowなどを使って複数Widgetを配置することで様々なダイアログを実装できます。

alert.png

showDialog(
  context: context,
  builder: (context) {
    Column(
      children: <Widget>[
        AlertDialog(
          title: Text("タイトル"),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Column(
                  // コンテンツ
                ),
              ],
            ),
          ),
          actions: <Widget>[
            // ボタン
          ],
        ),
      ],
    );
  }
);

→全文を見る

新規画面上にダイアログを実装する

CustomDialog.png

画像がはみ出したりするなど、AlertDialogやSimpleDialogで実現できなかった場合はこの方法になると思います。

ModalRouteを継承したページを実装します。
一枚の画面となりますのでpush()やpushNamed()で表示します。

import 'package:flutter/material.dart';

class OverlayDialogPage extends ModalRoute<void> {
  @override
  Duration get transitionDuration => Duration(milliseconds: 100);

  @override
  bool get opaque => false;
  :
  :

少しコードが長いので、実装したい方はこちらをご確認ください。

補足情報

Dialog

Dialog Widgetも用意されていますが、執筆現在では以下の表記があり、直接使用するのは避けたほうがよさそうです。

Rather than using this widget directly, consider using AlertDialog or SimpleDialog, which implement specific kinds of material design dialogs.

(和訳)
このウィジェットを直接使用するのではなく、特定の種類のダイアログを実装するAlertDialogまたはSimpleDialogの使用を検討してください。

AboutDialog

AboutDialog.png

アプリ名やアプリバージョンなどを表示して、OSSのライセンスページに遷移できるダイアログです。
このダイアログは、以下のようにshowAboutDialog()で呼び出せます。

(showLisencePage()で開くことができるライセンスページになりますが、ここでは詳細は割愛します。)

showAboutDialog(
  context: context,
  applicationIcon: Icon(Icons.photo),
  applicationName: "アプリ名",
  applicationVersion: "2.0.1",
  applicationLegalese: "あいうえお",
);

Material編 まとめ

・選択肢ダイアログ : SimpleDialog
・ボタンつきまたはカスタマイズ : AlertDialog
・それでも実現できない場合 : 新規ページにダイアログを実装する

Cupertino編

CupertinoAlertDialog

CupertinoAlertDialog.png

実装方法はAlertDialogと同じで、titleやcontent、actionsなどにWidgetを配置することで、簡単にiOSダイアログが組めます。

showDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text("タイトル"),
      content: Text("メッセージ"),
      actions: <Widget>[
        CupertinoDialogAction(
          child: Text("Delete"),
          isDestructiveAction: true,
          onPressed: () => Navigator.pop(context),
        ),
        CupertinoDialogAction(
          child: Text("OK"),
          onPressed: () => Navigator.pop(context),
        ),
      ],
    );
  },
);

CupertinoDialog

CupertinoDialogの使用はやめたほうがよさそうです。

Rather than using this widget directly, consider using CupertinoAlertDialog, which implement a specific kind of dialog."

(和訳)
”このウィジェットを直接使用するのではなく、特定の種類のダイアログを実装するCupertinoAlertDialogを使用することを検討してください。"

(現在Deprecatedになっているようです。)

Cupertino編まとめ

実質、CupertinoAlertDialogのみ用意されていますので、素直にこれを使いましょう。
カスタマイズしたい場合には、先ほどの新規画面上にダイアログを実装する方法くらいでしょうか。

その他参考

Widget Catalog
stackoverflow how-to-make-a-full-screen-dialog-in-flutter

以上です!!
間違い等ありましたら、ご指摘お願いします。

coka__01
Flutterが好きなスマホアプリエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした