下からせり上がる画面 Full-screen Modal Transition
次の画面が下から上へせり上がってきて全体を覆う。閉じると下へ戻っていく。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます
別タブで大きく開く ↗どんなもの?
「奥へ進む」のではなく「一時的に上に重ねる」ことを伝える動きです。新規作成や設定など、終わったら元に戻る画面に使います。
CupertinoPageRoute(fullscreenDialog: true) で開くと、どの OS でも下からせり上がります。
戻るボタンは「←」ではなく「×」(CloseButton)にするのがお約束です。
ボトムシートとの違いは、画面全体を覆って「別の作業」に切り替わることです。
こんなときに
- 新規作成・編集・設定など、終わったら元の画面に戻る作業
避けたい場面
- 一覧から詳細へ進む普通の遷移(「奥へ進む」動きのほうが合う)
最小コード
Navigator.of(context).push(
CupertinoPageRoute(
fullscreenDialog: true, // 下からせり上がる
builder: (_) => Scaffold(
appBar: AppBar(leading: const CloseButton(), title: const Text('新規作成')),
),
),
);使うウィジェット
CupertinoPageRoute(fullscreenDialog)MaterialPageRoute(fullscreenDialog)