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

下からせり上がる画面 Full-screen Modal Transition

次の画面が下から上へせり上がってきて全体を覆う。閉じると下へ戻っていく。

別名
モーダル遷移下から出る画面フルスクリーンモーダルPresent ModallySlide Up
動き
下から上がる×で下へ戻る
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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)

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

触ってみる ↗
画面遷移 iOS 風プッシュCupertino Page Transition

次の画面が右から滑り込み、前の画面は少しだけ左へずれて暗くなる。iPhone のアプリでおなじみの動き。

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

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

下から出てくる