More than 3 years have passed since last update.

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

Flutter

Last updated at 2020-09-10Posted at 2020-08-28

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),
        });
  }
}