【Flutter】go_router使って画面遷移アニメーション【Animation】

やりたいこと

Flutterを使ったアプリの画面遷移時にアニメーションをさせたい。
Navigatorのラッパーはgo_routerを使う。

解決策

builderではなく、pageBuilderを使ってGoRouteを作る。

まずはbuilderを使った普通の画面遷移がこれ。
至って普通。

GoRoute(
  path: '/a',
  builder: (context, state) => const AScreen(),
),

これを、builderではなくpageBuilderに変えていく。
builderのブロックの返り値の型はWidgetなのに対して、pageBuilderはCustomTransitionPageなので、まずは同一ファイルに下記のようなCustomTransitionPageを返すような関数を作る。
ちなみにこれはスライドイン×フェードインするようなアニメーション。

CustomTransitionPage<void> _buildPageWithAnimation(Widget page) {
  return CustomTransitionPage<void>(
    child: page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: SlideTransition(
          position: animation.drive(
            Tween<Offset>(
              begin: const Offset(1, 0),
              end: Offset.zero,
            ).chain(
              CurveTween(curve: Curves.easeIn),
            ),
          ),
          child: child,
        ),
      );
    },
  );
}

あとは_buildPageWithAnimation()に遷移したい画面のインスタンスを渡してpageBuilderで返してあげれば完成。

GoRoute(
    path: '/a',
    pageBuilder: (context, state) => _buildPageWithAnimation(
        const AScreen(),
    ),
),

こうするだけで、あとは普通にgoなりpushなりすれば画面遷移時にアニメーションしてくれる。
ちなみに、デバッグビルドだと若干カクつくので、確認する際はリリースビルドでやった方がいい。

まとめ

• go_routerを使って画面遷移時にアニメーションさせたい場合は、builderをpageBuilderに変えて実装しよう。

参考

• https://gorouter.dev/transitions