[Flutter]Dialogの表示方法

2023年5月30日 22:38

今回はFlutterのアプリにおいて、メッセージなどを確認させるための画面であるDialog(ダイアログ)の使い方についてご紹介します！

Dialogとは？

Dialogはユーザーとアプリケーションとの間の対話を促進するための一種の中間的な画面、またはメッセージボックスです。
ユーザーに情報を伝えたり、ユーザーからの入力を求めたり、確認や選択を求めたりするために使用されます。
ユーザーとの対話が発生するので、ダイアログでメッセージを伝え、ボタンをユーザーに押させてダイアログを閉じる、というような挙動もあります。

以下は使用シーンの例です。

警告: アプリケーションで何か重要なことが起こるとき（例えばデータが失われる可能性があるとき）、Dialogを表示してユーザーに警告することができます。
確認: ユーザーが重大なアクション（例えばアカウントの削除）を実行する前に、確認のためのDialogを表示することができます。
入力: ユーザーにテキストの入力や選択を求める場合、Dialogを使用することができます。

また、よく似た言葉でダイアログと混同されるものとしてモーダル(Modal)があります。
モーダルは、ユーザーの全注意を必要とするアクション、例えば設定の変更や重要な確認など、特定のタスクに集中するために使用されます。
また、モーダルが表示されている間、ユーザーはそれ以外の操作（モーダルウィンドウの背後にあるUIとの対話など）を行うことができないという特徴もあります。

ダイアログとモーダルの主な違い

「ユーザーがダイアログまたはモーダルウィンドウ以外のUIと対話できるかどうか」です。ダイアログは通常、一部のユーザーインタラクションを許可しますが、モーダルはユーザーがモーダルウィンドウを閉じるまで他のUIとの対話を完全にブロックします。

（上記は一般的な用語の説明で、特定のフレームワークやライブラリでは異なる振る舞いをすることがあります。たとえば、Flutterでは、ダイアログもモーダルの一種として扱われ、背後のUIとの対話をブロックします。）

コード例

Dialog classのドキュメントから、具体的なコードを見てみます。
日本語のドキュメントはこちら

import 'package:flutter/material.dart';

void main() => runApp(const DialogExampleApp());

class DialogExampleApp extends StatelessWidget {
  const DialogExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Dialog Sample')),
        body: const Center(
          child: DialogExample(),
        ),
      ),
    );
  }
}

class DialogExample extends StatelessWidget {
  const DialogExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text('This is a typical dialog.'),
                    const SizedBox(height: 15),
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: const Text('Close'),
                    ),
                  ],
                ),
              ),
            ),
          ),
          child: const Text('Show Dialog'),
        ),
        const SizedBox(height: 10),
        TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog.fullscreen(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('This is a fullscreen dialog.'),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Close'),
                  ),
                ],
              ),
            ),
          ),
          child: const Text('Show Fullscreen Dialog'),
        ),
      ],
    );
  }
}

上記のコードでは、画面にShow DialogとShow Fullscreen Dialogと書かれた2つのTextButtonが表示されています。
Show Dialogの方のTextButtonをタップ(onPressed)すると、showDialog()が呼び出され、画面にダイアログが表示されます。ダイアログにはThis is a typical dialog.という文字と、Closeというテキストボタンが縦に並んでおり、onPressedとNavigator.pop(context);によって元の画面に戻るようになっています。

        TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text('This is a typical dialog.'),
                    const SizedBox(height: 15),
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: const Text('Close'),
                    ),
                  ],
                ),
              ),
            ),
          ),
          child: const Text('Show Dialog'),
        ),

Show Fullscreen Dialogの方は、Dialog.fullscreen()を使っており、ボタンをタップすると画面いっぱいに広がるダイアログを表示できます。

 TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog.fullscreen(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('This is a fullscreen dialog.'),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Close'),
                  ),
                ],
              ),
            ),
          ),
          child: const Text('Show Fullscreen Dialog'),

上記のコードに、例えばボタンを1つ増やして別の画面に遷移させるなど、色々とカスタマイズできるので試してみてください!

この記事が気に入ったらサポートをしてみませんか？