🛵

go_routerでfullscreenDialogを使う

2023/02/11に公開

Flutter

go_router

fullscreendialog

tech

どう設定する?

画面遷移したときに、横に移動するのではなくて下から画面が出てきて画面が切り替わる機能をfullscreenDialogといいます。
iOSでないと、この動作はしないようですが?
Androidは、画面が切り替わるだけでしたね!

通常のコード
これをgo_routerでやりたい!

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => FullScreenDialogPage(),
    fullscreenDialog: true, // true だとモーダル遷移になる
  ),
);

調べてみても情報が出てこなくて困っていましたが、CODE WITH ANDREAに書いてあるのを見つけました!

こちらがアンドレアさんのサンプル

設定の仕方

GoRouter(
  initialLocation: '/',
  routes: [
    // top-level route
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        // one sub-route
        GoRoute(
          path: 'detail',
          builder: (context, state) => const DetailScreen(),
        ),
        // another sub-route
        GoRoute(
          path: 'modal',
	  // MaterialPageの中に画面遷移するクラスを書く.
	  // fullscreenDialog:を追加してtrueにする.
          pageBuilder: (context, state) => const MaterialPage(
            fullscreenDialog: true,
            child: ModalScreen(),
          ),
        )
      ],
    ),
  ],
)

これを参考に以前書いた記事で公開しているサンプルコードに、設定を追加しました。

既に作ってある詳細ページに、fullscreenDialogで画面遷移する方法を追加しただけです。

このような動作をします。

まとめ

今回は記事が短くなってしまいましたが、公式のサンプル通りに画面遷移の設定をすれば、fullscreenDialogを使うことはできるので、ソースコードを全て書くのは省略🙇‍♂️
最初は、アンドレアさんのサンプルをそのまま動かしみるのがいいと思います。

どう設定する?

このような動作をします。

まとめ

Discussion