• גל רום

Flutter Route Transitions

Updated: Nov 11


Flutter makes it very easy to have a default screen transition, all you need to do is to define the following on your MaterilApp Theme:


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

And you're good to go! But... I personally didn't felt comfortable with the result - the slide in animation is combined with a Fade-In effect, not my cup of tea... But hey, this is Flutter we are talking about here :) Customization is so accessible - this is one of the reasons that In my opinion makes Flutter so impressive. I followed this Flutter Documentation on route transitions

and implemented a cute Helper to handle the route transitions, check it out on GitHub Usage Example: Add the dependency to the pubspec.yaml file:


...
dependencies:
  route_animation_helper: 1.0.0+1
...

And you are good to go:


Navigator.of(context).push(RouteAnimationHelper.createRoute(destination : Screen2(), animType: AnimType.slideStart, duration: 450, curve: Curves.ease));

Get it on pub.dev Your comments and thought are more than welcome!

10 views
 

Subscribe Form

©2020 by Gal Rom.