Zenn
🐈

【Flutter】go_router使って画面遷移でアニメーションを消す

2023/01/21に公開
Flutter
Dart
go_router
tech

はじめに

Flutterを使ったアプリで、アニメーションなしで画面遷移する方法です。
go_routerを使います。

  • 実行環境
    Chrome

  • flutterのバージョン

$ flutter --version

Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (5 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0
  • go_router
    pubspec.yamlにgo_routerを追加してください
dependencies:
  go_router: ^5.2.1

やりかた

アニメーションを変更するためにはbuilderではなく、pageBuilderを使います

  • builderの場合
 GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomePage();
      },
    ),
  • pageBuilderの場合×アニメーションなし

アニメーションを変更するためにbuilderではなく、pageBuilderを使うようにしなければならないのですが、builderの返り値の型はWidgetなのに対して、pageBuilderはCustomTransitionPageとなっています。そのため、CustomTransitionPageを返すような関数を作って渡してあげなければいけません。

CustomTransitionPage<T> buildTransitionPage<T>({
  required Widget child,
}) {
  return CustomTransitionPage<T>(
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
    transitionDuration: const Duration(milliseconds: 0),
  );
}

transitionDurationに割り当てられている、Durtation()を変えることで遷移時間を変えることができます。Durtation(seconds: 0)とすると遷移時間がなくなります。これでアニメーションなしを実装しています。

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

  GoRoute(
      path: '/',
      pageBuilder: (context, state) => buildTransitionPage(
	child: const HomePage(),
      ),
    ),

参考

https://qiita.com/KKusumi/items/4bd21e904c66175b8aa0
https://yukiit.com/programming/1606/

Discussion