Frosted Glass transition (speed 2x to keep the GIF small enough)

How to create a Frosted Glass blur transition

Create the blur:

Adding a Frosted Glass blur effect in Flutter is super simple, as illustrated on this post from Collin Jackson. It’s as simple as using those few lines of code:

new BackdropFilter ( filter: new ImageFilter . blur ( sigmaX: blurValue , sigmaY: blurValue ), child: new Container ( child: widgetToBlur , ), )

This will add the blur effect on the whole widgetToBlur with a strength of blurValue .

Create the animation:

To make it into a transition, first create an AnimatedWidget:

class FrostTransition extends AnimatedWidget { final Widget child ; final Animation < double > animation ; FrostTransition ({ this . animation , this . child }) : super ( listenable: animation ); @ override Widget build ( BuildContext context ) => new BackdropFilter ( filter: new ImageFilter . blur ( sigmaX: animation . value , sigmaY: animation . value ), child: new Container ( child: child , ), ); }

Now you just have to feed this widget with an animation and the child widget to blur.

Create the new page with the blur transition:

For this we will use a PopupRoute. This allows us to see the route under through a transparent background with the blur effect applied to it. This is really nice for menus!

class OverlayMenuPage extends PopupRoute < Null > { static const double frostAnimationStartValue = 0.0 ; static const double frostAnimationEndValue = 10.0 ; @ override Color get barrierColor => null ; @ override bool get barrierDismissible => true ; @ override String get barrierLabel => "Close" ; @ override Duration get transitionDuration => const Duration ( milliseconds: 300 ); @ override Widget buildTransitions ( BuildContext context , Animation < double > animation , Animation < double > secondaryAnimation , Widget child ) => new FrostTransition ( animation: new Tween < double > ( begin: frostAnimationStartValue , end: frostAnimationEndValue , ). animate ( animation ), child: child , ); @ override Widget buildPage ( BuildContext context , Animation < double > animation , Animation < double > secondaryAnimation ) => new _PageLayout (); }

Where _PageLayout is your Widget with the content of the page.

All done!

That’s it! Now you can simply summon the menu with:

Navigator . of ( context ). push ( new OverlayMenuPage ())

Get the full code:

You can get the full example (as shown on the GIF) on our Github:

https://github.com/Tengio/flutter-frost-transition-example