Zenn
👻

Flutter AndroidでもiOS風の画面遷移とスワイプで戻るを有効にする

2020/12/17に公開
Flutter
tech

PageTransitionsTheme

ThemeData.pageTransitionsTheme を設定することで、画面遷移のトランジション（アニメーション）を Theme 経由で制御できる。

デフォルトではPageTransitionsTheme というクラスが使われ、内部では以下のようなMapになっており、Androidでは FadeUpwardsPageTransitionsBuilder が使われる。

<TargetPlatform, PageTransitionsBuilder>{
  TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
  TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
  TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
};

コンストラクタでプラットフォームごとの PageTransitionsBuilder の対応Mapを渡せばカスタマイズできる。もし AndroidでもiOS風の遷移をさせたければ CupertinoPageTransitionsBuilder を使う。

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: <TargetPlatform, PageTransitionsBuilder>{
        TargetPlatform.android: CupertinoPageTransitionsBuilder(), // iOS風
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
        TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
      },
    ),
  ),
  home: const YourHomePage(),
);

あるいは PageTransitionsTheme を継承して buildTransitions をoverrideしてしまう方法もある。

class MyPageTransitionsTheme extends PageTransitionsTheme {
  const MyPageTransitionsTheme();

  // すべてこれを使う
  static const PageTransitionsBuilder builder = CupertinoPageTransitionsBuilder();

  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return builder.buildTransitions<T>(route, context, animation, secondaryAnimation, child);
  }
}

MaterialPageRoute

なお PageTransitionsTheme を参照してくれるのは MaterialPageRoute なので、遷移時は MaterialPageRoute を使う。

Navigator.of(context).push(MaterialPageRoute<void>(
  builder: (BuildContext context) => const YourSecondPage(),
));

他のPageTransitionsBuilder

Flutterに最初から用意されている PageTransitionsBuilder

  • FadeUpwardsPageTransitionsBuilder: FlutterにおけるAndroidの標準
  • CupertinoPageTransitionsBuilder: iOS 風
  • OpenUpwardsPageTransitionsBuilder: Android P 風
  • ZoomPageTransitionsBuilder: Android 10 風

この記事はQiitaの記事をエクスポートしたものです

Discussion