フルスクリーンダイアログ Full-screen Dialog
画面全体を覆う入力画面。左上の×で閉じ、右上の「保存」で確定する。
本物の 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)