[Flutter]画面遷移にアニメーションを付ける方法

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

画面遷移にアニメーションをつける方法を紹介します。

方法

画面遷移にアニメーションをつける方法は、２つあります。

PageRouteBuilder

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

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

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

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

そして、PageRouteBuilderの引数「transitionBuilder」で、画面遷移する際に付けたいアニメーションをTransition系ウェジェットで指定します。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) =>
        Page2(),
    transitionsBuilder:
        (context, animation, secondaryAnimation, child) {
      return ScaleTransition(child: child, scale: animation);//Transition系でアニメーションを指定
    },
  ),
);

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

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の値で指定します。

Navigator.push(
  context,
  PageTransition(
    child: Page2(), //画面遷移先
    type: PageTransitionType.leftToRight, //アニメーションの種類
  ),
);

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

まとめ

画面遷移にアニメーションをつける方法は、次の２つです。

• PageRouteBuilder
• page_transitionパッケージ

[Flutter]ダイアログをスライドアニメーションで表示するには？

ダイアログをスライドアニメーションで表示する方法を紹介します。

www.choge-blog.com

2021.11.05

[Flutter]Containerを動かすアニメーションをする方法

Containerを動かすアニメーションをする方法を紹介します。

www.choge-blog.com

2021.11.05

[Flutter]ダイアログをスケールアニメーションで表示するには？

ダイアログをスケールアニメーションで表示する方法を紹介します。

www.choge-blog.com

2021.11.04