【Flutter】ページ遷移関数をラップするといい感じ

普通にページ遷移を書くときにもやもやするところ

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

1. return でページ遷移を表現するのがあまり直感的（宣言的）でない気がする。Webだと<Link to='/path' />とかで書けて、わかりやすい。
2. transitionBuilderプロパティを追加してアニメーションをつけようとすると急に行数が増える
3. Navigation.of...とか、PageRouteBuilder(...)とか、長いのでちょくちょく書き方を忘れる

Navigator.pushNamed...でパスを指定するやり方にすれば1は解決されるけど、アプリ内にページが増えるとパスを管理するのが面倒になってくる。し、パスで指定するとIDE上でジャンプできない。return NextPage()形式で記述しておけばジャンプしてすぐ遷移先を確認できるので、その便利さは失いたくない。

「これでいっか」ってなったやつ

アニメーション付きページ遷移関数をラップする。たとえばこんな感じ。

void fadePageTransition(
    {@required BuildContext context, @required Widget nextPage}) {
  Navigator.of(context).push(
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return nextPage;
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    ),
  );
}

すると、遷移を記述するときにこんな感じで使える。すっきりかけるし、nextPageというプロパティで遷移先を指定しているので読みやすい（ここはtoとかでもいいかも）。

fadePageTransition(
  context: context,
  nextPage: NextPage(),
 );

他のアニメーション付き遷移に関してもラップ関数を用意して、パッケージ化しておくと管理も簡単。そして名前を忘れることがないので、IDEの補完機能を活用してストレスなく記述できる。万々歳🎉