Flutter Page Route Animation

Question

How do I add animation to my existing routes?

 child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Home',
        home: Home(),
        onGenerateInitialRoutes: ,
        routes: {
          SettingsScreen.routeName: (ctx) => SettingsScreen(),
          AboutScreen.routeName: (ctx) => AboutScreen(),
        },

From what I search so far, it looks like I have to implement onGenerateRoute

Does this mean I have to remove my current routes setting?

Answer 1

Check official docs here: https://api.flutter.dev/flutter/material/PageTransitionsTheme-class.html

Example usage:

return MaterialApp(
  title: 'Transitions Page',
  theme: ThemeData(
      pageTransitionsTheme: PageTransitionsTheme(builders: {
    TargetPlatform.iOS: ZoomPageTransitionsBuilder(),
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
  })),
  home: MyHomePage(title: 'Some page'),
);