go_routerでfullscreenDialogを使う

どう設定する?

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

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

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

調べてみても情報が出てこなくて困っていましたが、CODE WITH ANDREAに書いてあるのを見つけました!
https://codewithandrea.com/articles/flutter-navigation-gorouter-go-vs-push/
こちらがアンドレアさんのサンプル
https://gist.github.com/bizz84/afb7e73b40caf56b81298116490bddde
設定の仕方

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(),
          ),
        )
      ],
    ),
  ],
)

これを参考に以前書いた記事で公開しているサンプルコードに、設定を追加しました。
https://github.com/sakurakotubaki/Go-Router-BottomNavigationBar/blob/main/lib/router/router.dart

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

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

まとめ

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