【Flutter】Full-screen dialogの使い所

Full-screen dialogとは？

通常はNavigator.pushを行うと右側から左側（←方向）に次のWidgetが入り込んでくるが、MaterialPageRouteのfullscreenDialogを使うと下側から上側（↑方向）に向かって次のWidgetが入り込んでくるようにできる。

See the Pen by popy1017 (@popy1017) on CodePen.

※ 戻る（閉じる）アイコンがおかしいのはおそらくCodePenの仕様です。

通常の画面遷移の場合は→スワイプで戻る操作を行えるが、full-screen dialogの場合は左上のXボタンを押して画面を閉じる。(ScrollControllerを使えばプルダウン操作で閉じることも可能)

Full-screen dialogの使い所

Material Designの説明によると、下記のような場合での使用が推奨されている。

• FormFieldなど、キーボード入力を必要とするコンポーネントを含むダイアログ
• 変更がすぐに保存されない場合
• ダイアログ内のコンポーネントが追加のダイアログを開くとき

→カレンダーにイベントを追加するときみたいな「ユーザーに多くの項目を設定してもらうオブジェクト」を登録させたい場合に使うと良さそう。

material.io

なんとなくプルダウンで閉じれたら便利だなあと思ってfull-screnn dialogにしたけど、上記基準にマッチしていないので変えよう。 また、「戻る」ではなく「閉じる」なので左上のアイコンは「X」で固定。