Flutter Frosted Glass Transition


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

  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;

  Color get barrierColor => null;

  bool get barrierDismissible => true;

  String get barrierLabel => "Close";

  Duration get transitionDuration => const Duration(milliseconds: 300);

  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) =>
        new FrostTransition(
            animation: new Tween<double>(
            begin: frostAnimationStartValue,
            end: frostAnimationEndValue,
            child: child,

  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:


Quentin image


Quentin found himself a passion in augmented and virtual reality and has been testing and learning in this field ever since. Now he wants to help back the community by sharing the result of his studies.

comments powered by Disqus