Help us understand the problem. What is going on with this article?

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

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 風
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした