How to add custom transitions to my Flutter route in my Flutter app

Question

How can I add custom transitions to my Flutter route? This is my current route structure.

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Yaip',
            theme: new ThemeData(
                primarySwatch: Colors.pink,
                brightness: Brightness.light
            ),
            home: new VerifyPhoneNumber(),
            routes: <String, WidgetBuilder>{
                '/verified': (BuildContext context) =>  new MobileNumberVerified(),
                '/setupprofile': (BuildContext context) =>  new SetUpProfile()
            },
        );
    }
}

Answer 1

You can change the transition theme of the MaterialApp widget to use the CupertinoPageTransitionsBuilder if you want iOS like animations for all your routes

MaterialApp(
   theme: ThemeData(
   pageTransitionsTheme: PageTransitionsTheme(builders: {
   TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
   TargetPlatform.android: CupertinoPageTransitionsBuilder(),
   }),
...
)

Answer 2

Use PageRouteBuilder:

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => Page2(),
    transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
    transitionDuration: Duration(milliseconds: 2000),
  ),
);