個人開発者が勉強がてらまとめているだけのサイトです

フルスクリーンダイアログ Full-screen Dialog

画面全体を覆う入力画面。左上の×で閉じ、右上の「保存」で確定する。

別名
全画面モーダル作成画面入力モーダルFull-screen Modal
動き
全面を覆う×で閉じる
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

予定の作成やメールの新規作成など、「行って帰ってくる」まとまった入力に向いています。

普通の画面遷移と違い、戻るボタンが「←」ではなく「×」になり、「やめる」ことがはっきりします。

Flutter では Dialog.fullscreen を showDialog で出すか、

MaterialPageRoute(fullscreenDialog: true) で下からせり上がる画面として出します。

こんなときに

  • 入力項目が多く、ボトムシートや普通のダイアログに収まらない
  • 保存するか破棄するかをはっきり選ばせたい

避けたい場面

  • 入力が1〜2項目だけ(アラートダイアログやボトムシートで十分)

最小コード

final title = await showDialog<String>(
  context: context,
  builder: (context) => Dialog.fullscreen(
    child: Scaffold(
      appBar: AppBar(
        leading: const CloseButton(),
        title: const Text('新しい予定'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(controller.text),
            child: const Text('保存'),
          ),
        ],
      ),
      body: TextField(controller: controller),
    ),
  ),
);

使うウィジェット

Dialog.fullscreenMaterialPageRoute(fullscreenDialog)

似ているもの・一緒に見たいもの

触ってみる ↗
ダイアログ・シート モーダルボトムシートModal Bottom Sheet

画面の下から板がせり上がってきて、選択肢や小さなフォームを出す。外側を押すか下に引くと閉じる。

下から出てくる