[Flutter] Navigatorを利用した画面遷移時の標準トランジション (エフェクト) を変更する方法

1. はじめに

Navigatorを利用した画面遷移時の標準エフェクト (トランジション) の使い方とその種類についてまとめています。

なお、AndroidやiOSアプリの標準の画面遷移時のエフェクトを指定して簡単に利用できますが、Heroウィジェットを利用した時のようなカッコいいアニメーションではないので、本記事で説明する標準の選択肢で満足できない場合は自前のトランジションを作成する必要があります。これについては別途記事を書きたいと思います。

2. 使い方

MaterialAppにpageTransitionsThemeというプロパティが用意されていますので、これを利用します。

引数のbuildersプロパティにはターゲットプラットフォーム毎のテーマを指定する感じになります。なので、ターゲットのプラットフォームの値を目的のトランジションに上書きする感じです。

サンプルコード

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Navigator Transitions Themes',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          // ↓ これ！ デフォルト値は以下です。
          pageTransitionsTheme: const PageTransitionsTheme(
              builders: <TargetPlatform, PageTransitionsBuilder>{
                TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
                TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
                TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
                TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
                TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(),
              }),
        ),
        initialRoute: '/page0',
        routes: <String, WidgetBuilder>{
          '/page0': (_) => MyHomePage(num: 0),
          '/page1': (_) => MyHomePage(num: 1),
        });
  }
}

PageTransitionsBuilder

ソースコードはここにあります。これを参考にすればカスタムなテーマが作れそうです。
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/page_transitions_theme.dart

3. 標準トランジション

数は多くありませんが、それぞれを紹介しておきます。

CupertinoPageTransitionsBuilder

iOS向けトランジションです。

FadeUpwardsPageTransitionsBuilder!

Android向け標準トランジションです。

OpenUpwardsPageTransitionsBuilder

Android 9ライクなトランジションです。

ZoomPageTransitionsBuilder

Android 10ライクなトランジションです。