Unusual page transition animation in Flutter app, what can be a reason?

October 8, 2022

My android flutter app started makes strange page animation when moving to next page and back. I’m not shure what I could change to make that happen. In other words, it does not the way as adndroid app do by default. Not special animation or so was used. Just usual way to go to the next page:

Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (context) => const HomeView()),
);

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const About()),
);

Now, when you go to a new page, its content appears as if from the center of the screen. And when you click on the back button – the page appears, as it were, from the edges to the center.

>Solution :

The default page transition animation was changed in Flutter 3.0. The default FadeUpwardsPageTransitionsBuilder was replaced with ZoomPageTransitionsBuilder, which is what I believe you are referring to as "From the center of the screen" and "From the edges to the center".

If you want to revert back to the old animation use the below code

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: Map<TargetPlatform, PageTransitionsBuilder>.fromIterable(
        TargetPlatform.values,
        value: (dynamic _) => const FadeUpwardsPageTransitionsBuilder(), //applying old animation
      ),
    ),
  ),
)

Know more about this change in the flutter dev docs.