[Flutter]フェードアニメーション(fade 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」で、FadeTransitionをreturnします。

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

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

アニメーションの時間の設定は、PageRouteBuilderの引数「transitionDuration」と「reverseTransitionDuration」で行います。

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.fadeを指定します。

Navigator.push(
  context,
  PageTransition(
    child: Page2(), //画面遷移先
    type: PageTransitionType.fade,
    duration: Duration(seconds: 1),//アニメーションの時間
    reverseDuration: Duration(seconds: 1),//戻る際のアニメーションの時間
  ),
);

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