[Flutter]スライドアニメーション(slide 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」で、SlideTransitionをreturnします。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) =>
        Page2(),
    transitionsBuilder:
        (context, animation, secondaryAnimation, child) {
    Offset _start = Offset(0.0, 1.0); //出てくる場所
    Offset _end = Offset.zero; //最終地点
    Animation<Offset> _offset =
    Tween(begin: _start, end: _end).animate(animation);

    return SlideTransition(child: child, position: _offset);
    },
  ),
);

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

アニメーションの時間の設定は、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の次の値を指定します。

PageTransitionType.topToBottom : 上から下へ
PageTransitionType.bottomToTop : 下から上へ
PageTransitionType.leftToRight : 左から右へ
PageTransitionType.rightToLeft : 右から左へ

指定した値によって、スライドの仕方が変わります。

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

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