【Flutter 2.0】showModalBottomSheetでiOSのmodal遷移のように見せる実装

はじめに

こんにちは。普段iOSで利用するような present(_:animated:completion:)Modal遷移をFlutterでも実現させたくなりました。イメージは以下のような感じです。

ソースコード

使い方

以下にそれぞれのカスタマイズの方法を書いていきます。

上側のTabBarのデザインの設定

heightでTabBarの高さ
BoxDecorationでiOSのModalのデザインになるように角丸を
colorで擬似NavigationBarの色をそれぞれ設定しています。

BottomSheet画面の高さの設定

デバイスサイズの0.9倍に設定しているので、ここで0.5などを設定するとデバイスのちょうど半分の大きさになります。

注意
showModalBottomSheetisScrollControlled: true,を書かないと高さを変えることが出来ません。

BottomSheet以外の暗い部分をタップで閉じるかどうかの設定

BottomSheet自体を触って閉じるかどうかの設定

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です