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

Use PageRouteBuilder:

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

Answer 2

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 3

You can subclass MaterialPageRoute and override buildTransitions. Check out this Stack Overflow answer for example code.

Answer 4

Just in case if you wish to use other packages than default material one then there is one beautiful library/package available in flutter known as "Fluro". You can use this library with less overhead. here is the link to official fluro - https://pub.dartlang.org/packages/fluro you can learn this completely from the provided example directory.

Answer 5

Use PageRouteBuilder for a custom page transition. You can achieve various types of page transition effects. Below are some commented custom page transition you can uncomment one of them and run to see how it works on different transitions.

PageRouteBuilder _pageRouteBuilder() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return Demo2();
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // return SlideTransition(
        //   position: animation.drive(
        //     Tween<Offset>(begin: Offset(-1.0, 0.0), end: Offset.zero),
        //   ),
        //   child: SlideTransition(
        //     position: Tween<Offset>(
        //       begin: Offset.zero,
        //       end: Offset(0.0, 1.0),
        //     ).animate(secondaryAnimation),
        //     child: child,
        //   ),
        // );
        // return ScaleTransition(
        //   scale: animation.drive(
        //     Tween<double>(begin: 0.0, end: 1.0).chain(
        //       CurveTween(
        //         curve: Interval(0.0, 0.5, curve: Curves.elasticIn),
        //       ),
        //     ),
        //   ),
        //   child: ScaleTransition(
        //     scale: Tween<double>(begin: 1.5, end: 1.0).animate(
        //       CurvedAnimation(
        //         parent: animation,
        //         curve: Interval(0.5, 1.0, curve: Curves.elasticInOut),
        //       ),
        //     ),
        //     child: child,
        //   ),
        // );
        return ScaleTransition(
          scale: CurvedAnimation(parent: animation, curve: Curves.elasticInOut),
          child: child,
        );
      },
      transitionDuration: const Duration(seconds: 1),
    );
  }

And now suppose I have to open a new route on a click of a button:

Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.push(context, _pageRouteBuilder());
            },
            child: Text('Go!'),
          ),
        ),
      ),
    );
  } 

Answer 6

A better way is to create a RouteGenerator class with string values for named routes. This way you reference all your routes from one class. The RouteGenerator class contains one method: static Route handleRoute(RouteSettings routeSettings) with case statements for each MaterialPageRoute.

A switch statement matches the string to a route and the MaterialPageRoute pushes the widget on the stack. you can also get access to arguments passed to the Route Generator

in main.dart

  onGenerateRoute: RouteGenerator.handleRoute,

navigation from a childwidget

  Navigator.pushNamed(context, RouteGenerator.page1Page,
                                arguments: myCustomView)

Class

 class RouteGenerator {
  static const String homePage = "/home";
  static const String page1Page = "/page1";
  static const String page2Page = "/page2";

  RouteGenerator._();
  static Route<dynamic> handleRoute(RouteSettings routeSettings) {
   Widget childWidget;
   switch (routeSettings.name) {
    case homePage:
    {
      childWidget = HomePageWidget(title: 'Performance Reviews');
    }
    break;
  case page1Page:
    {
      childWidget = Page1Widget();
    }
    break;
  case page2Page:
    {
      final args = routeSettings.arguments as MyCustomView;
      childWidget = Page2Widget(args);
    }
    break;
  default:
    throw FormatException("Route Not Found");
  }
  return MaterialPageRoute(builder: (context) => childWidget);
 }
 }