How does Flutter Android use iOS page transition animation?

As we all know, the default page transition animation of Flutter Android opens from the bottom up, while iOS slides in to the right and the old page pushes out to the left. But when you open it from the bottom up, there is always a slight sense of violation. So how to achieve a unified page transition animation with iOS?

It’s very simple. We did a lot of searching at the beginning, and we found that most of them were animated routes, or Cupertino, but it didn’t feel right because Material and Cupertino don’t mix very nicely.

You only need to define the pageTransitionsTheme method in the Theme in the MaterialApp.

Here is an example of the default source code

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.android: CupertinoPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
        }),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}Copy the code

Separately listed here, equivalent to a specified use CupertinoPageTransitionsBuilder android and ios platform

        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.android: CupertinoPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
        }),
Copy the code

View PageTransitionsTheme class, found that there are more ways API. The flutter. Dev/flutter/mat…

ThemeData pageTransitionsTheme, it defines the subject of the default page transition.

FadeUpwardsPageTransitionsBuilder, it defines the default page transition.

OpenUpwardsPageTransitionsBuilder, it defines the page transitions with Android P provide similar page transitions.

CupertinoPageTransitionsBuilder, its definition and local iOS page transition matching the level of the transition.

The final result