🎉

【Flutter】go_routerのGoRouteDataで下から上に遷移してみた

2025/03/15に公開

 GoRouteDataで画面遷移方法を変えたい場合GoRouteDataを使用している中で、普通の遷移方法ではなく、下から上に遷移画面が出てくるような遷移方法を実装する必要がありました。
GoRouteを直接使う方法では記載があるのですが、GoRouteDataではなかったので備忘録でかきこ。
https://pub.dev/packages/go_router

 実装方法//
class HogahogaRoute extends GoRouteData {
  /// Constructor
  const HogahogaRoute(this.$extra);

  ///　path
  static const path = '/hoga_hoga';

  /// 値の受渡用
  final Data $extra;

  @override
  Page<void> buildPage(BuildContext context, GoRouterState state) {
    return CustomTransitionPage<void>(
      key: state.pageKey,
      child: HogahogaPage(
        datahoga: $extra.hoga,
        datahoge: $extra.hoge,
      ),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0, 1), // 下からスライド
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      },
    );
  }
}
begin: Offset(x, y) の x を変えると「左右」から、y を変えると「上下」からスライドできる！

Offset(1, 0) → 右から左へスライドイン

Offset(-1, 0) → 左から右へスライドイン

Offset(0, 1) → 下から上へスライドイン（モーダル風）
ほかにも　

transitionDuration、reverseTransitionDurationを使用して表示速度を変えれます。
結構自由度高そうなのはさすがだなと。
以上！

GoRouteDataで画面遷移方法を変えたい場合

実装方法

Discussion