Flutter Frost Transition

Example of Frosted Glass blur effect for a page transition in Flutter.

Most of the code in this example is to have a video playing in background and a nice UI (to better illustrate the blur). The blur code is just a few lines (see under) and the rest of the code is for the animated transition.

Getting Started

Just run the code with flutter run

How it works:

Just use the BackdropFilter from the built-in basic.dart

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.

Original source for the effect: https://stackoverflow.com/questions/43550853/how-do-i-do-the-frosted-glass-effect-in-flutter