CODEWITHSUNDEEP
flutterdartroutestransition
Michael Tawiah Sowah
Michael Tawiah Sowah

Reputation: 159

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

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()
            },
        );
    }
}

Upvotes: 13

Views: 24166

Answers (6)

ListenSoftware Louise Ai Agent
ListenSoftware Louise Ai Agent

Reputation: 4233

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);
 }
 }

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267404

Use PageRouteBuilder:

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

Upvotes: 15

Shubhamhackz
Shubhamhackz

Reputation: 7963

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!'),
          ),
        ),
      ),
    );
  }

Upvotes: 1

Michael Guldborg
Michael Guldborg

Reputation: 221

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(),
   }),
...
)

Upvotes: 15

Vaibhav Miniyar
Vaibhav Miniyar

Reputation: 773

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.

Upvotes: 4

Collin Jackson
Collin Jackson

Reputation: 116708

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

Upvotes: 9

Related Questions