Flutterの画面遷移をモーダルにするには

結論

PageRouteクラスに、fullscreenDialogプロパティがあるので、trueを設定するだけ。

これで、iOSのUINavivationControllerのpushの画面遷移の仕方でなく、モーダルで立ち上がるような遷移になる。

左上のボタンも←から☓に変わってくれる。

実装例

いま作ってるアプリでは、こんな感じのメソッドを自分のAppNavigatorみたいなクラスに書いてます。

  Future<T> _showScreen<T extends dynamic>(
      BuildContext context, String routePath, Widget destinationScreenWidget,
      {bool modal = false}) {
    return Navigator.push(
      context,
      MaterialPageRoute<T>(
          settings: new RouteSettings(name: routePath),
          builder: (BuildContext context) {
            return new Theme(
              data: AppConfig.kTheme
                  .copyWith(platform: Theme.of(context).platform),
              child: destinationScreenWidget,
            );
          },
          fullscreenDialog: modal),
    );

参考

Flutter GalleryのMaterial -> Dialogs -> FULLSCREENで動きを確認できる
Flutter Galleryのソースはこちら

最後に

“flutter modal"とググっていて、全然引っかからなくて、しばらく諦めてたんですが、絶対あるはずということで根気よく調べたら、“flutter popup screen”で検索したら、こちらのブログを見つけて、「あー、モーダルってダイアログでしたね。。」となっているところです。。。

結論

実装例

参考

最後に

FEATURED TAGS