🌀
go_router_builderでfullScreen: trueにする方法
概要
go_router_builderで下から上に表示されるような遷移をしたく、公式ドキュメントをほじくってみたら、見つけたので、自分のためにもアウトプットを残します！
開発環境
- flutter 3.16.0
- go_router: ^12.1.1
- build_runner: ^2.4.6
- go_router_builder: ^2.3.4
公式のGoRouteDataの書き方
routes.dart
<HomePageRoute>(
path: '/home',
)
class HomePageRoute extends GoRouteData {
const HomePageRoute();
Widget build(BuildContext context, GoRouterState state) => const HomePage();
}
fullScreen: trueのGoRouteData
buildメソッドにオーバーライドするのではなく、buildPageメソッドをオーバーライドすることで、遷移アニメーションを変えることができるわけですね。
routes.dart
@TypedGoRoute<HomePageRoute>(
path: '/home',
)
class HomePageRoute extends GoRouteData {
- const HomePageRoute();
- Widget build(BuildContext context, GoRouterState state) => const HomePage();
+ MaterialPage<void> buildPage(BuildContext context, GoRouterState state) =>
+ const MaterialPage<void>(
+ fullscreenDialog: true,
+ child: HomePage(),
+ );
}
まとめ
とても簡単な紹介でしたが、ご覧頂きありがとうございました！
ミス等ありましたら、コメントや、X（旧Twitter）などのDMで教えていただけると嬉しいです！
最近GoRouterすっ飛ばして、GoRouterBuilderから入門したので、よくわからないところが多いのですが、やっぱり公式ドキュメント読むのが一番確実ですね^^
参考
Discussion