Geek Culture
Published in

Geek Culture

Defining Custom Page Transitions in Flutter

Compatible with Navigator 2.0 & 1.0

A Flutter page transition

If you take a look at how to animate a page route transition in the Flutter Cookbook, you will find a recipe for wrapping your Widget in a PageRouteBuilder and passing it to Navigator.of(context).push, similar to

Navigator.of(context).push(_createRoute(Page2());Route _createRoute(Widget child) {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => child,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
// define your animation here
// TODO: return animated child
},
);
}

This approach is not very adaptive, and worse, it doesn’t even work with Navigator 2.0. Fortunately, there’s simple solution that can easily be adapted to each platform and is compatible with both Navigator 2.0 & 1.0!

In this guide, we will define a simple transition that scales and fades in & out. For this, we create a single class CustomTransitionBuilder that extends PageTransitionsBuilder and override the buildTransitions method.

class CustomTransitionBuilder extends PageTransitionsBuilder {
const CustomTransitionBuilder();
@override
Widget buildTransitions<T>(
PageRoute<T> route,
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
final tween = Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: Curves.ease)); return ScaleTransition(
scale: animation.drive(tween),
child: FadeTransition(opacity: animation, child: child));
}
}

As you can see, we are using the ScaleTransition and FadeTransition AnimatedWidgets. We define a Tween that begins at 0.0 and ends at 1.0 using Curves.ease for a more natural animation. This is a very simple animation. You could also create your own complex animation widgets and use them here instead, or use animations from Flutter packages.

Now, to use our transition, we simply define our app’s PageTransitionsTheme.

MaterialApp.router(
...
theme: ThemeData(
...
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
TargetPlatform.android: CustomTransitionBuilder(),
TargetPlatform.iOS: CustomTransitionBuilder(),
TargetPlatform.macOS: CustomTransitionBuilder(),
TargetPlatform.windows: CustomTransitionBuilder(),
TargetPlatform.linux: CustomTransitionBuilder(),
},
),
),
...
),

You only have to define a builder for the platforms your custom transition targets, but you can see how adaptable this approach is. Just create a different builder for each platform that you wish to animate differently. This approach even applies the transitions in a web browser according to the platform that your app is being accessed from!

That’s all there is to it! As stated, this technique works for both navigation approaches, so I encourage you to try it out in whichever you prefer.

As always, thanks for reading. Please follow me if you’d like to learn more about Flutter.

If you are new to Navigator 2.0, check out my three part series here.

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Hacking — Best OF Reverse Engineering — Part 3

How to monitor packet flow using the TCPDUMP

Crodo VS Matic Launchpad: Battle Of Launchpads

Introduction to Kobiton, my story about building a real mobile device testing service on the cloud

LHR Waves in ERGO? Get +25% Extra

Putting together an elementary Apache Beam pipeline in Python. Piece by Piece.

Managing a multi-site Cassandra cluster on multiple Kubernetes with CassKop / MultiCassKop

Can I teach myself to code?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lee Phillips

Lee Phillips

Software developer. Flutter fanatic. Other interests include photography, sports, coffee, and food.

More from Medium

Flutter — Responsive Design : MediaQuery

Edit / Modify flutter existing packages

Dart inheritance

Flutter Best Way Of Writing Network Layer.