[Flutter]スケールアニメーション(scale animation)で画面遷移(page transition)するには？

どうも、ちょげ(@chogetarou)です。

画面の拡大・縮小のスケールアニメーションで、画面遷移する方法を紹介します。

方法
1. PageRouteBuilder
2. page_transition
まとめ

方法

スケールアニメーションで画面遷移する方法は、２つあります。

PageRouteBuilder

１つは、PageRouteBuilderを使う方法です。

まず、Navigator.pushの第２引数にPageRouteBuilderを指定します。

次に、PageRouteBuilderの引数「pageBuilder」で画面遷移先のページをreturnします。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) =>
        Page2(),
  ),
)

そして、PageRouteBuilderの引数「transitionBuilder」で、ScaleTransitionをreturnします。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) =>
        Page2(),
    transitionsBuilder:
        (context, animation, secondaryAnimation, child) {
      return ScaleTransition(child: child, scale: animation);
    },
  ),
);

これで画面遷移する際に、スケールアニメーションが付与されます。

page_transition

もう１つは、page_transitionパッケージを使う方法です。

まず、「pubspec.yaml」でパッケージを導入します。

dependencies:
  page_transition: ^2.0.4

そして、該当ファイルでパッケージをインポートします。

import 'package:page_transition/page_transition.dart';

次に、Navigator.pushの第２引数に、PageTransitionウェジェットを指定します。

Navigator.push(
  context,
  PageTransition(),
);

最後に、引数「child」に画面遷移先のウェジェット、引数「type」にPageTransitionType.scaleを指定します。

また、引数「alignment」に拡大・縮小の中心となる場所を指定します。

Navigator.push(
  context,
  PageTransition(
    child: Page2(), //画面遷移先
    type: PageTransitionType.scale,
    alignment: Alignment.center, //拡大・縮小の中心を中央に設定
  ),
);

これで画面遷移にアニメーションが付きます。

PageTransitionType.scaleでスケールアニメーションを指定する際には、引数「alignment」の設定がないとエラーになります。