Frosted Glass Effect in Flutter App

Frosted Glass effect is kind of common effect used in the iOS application. The main idea of adding frosted glass effect in the application of showing the view which needs to focus in a clean environment while blurring the other content to make that less focus.

Flutter provides the easy inbuild widget to create a Frosted glass effect in your and this will work both in iOS and Android quite well.

BackdropFilter widget in Flutter can use to blur the image, container and many other widgets as well.

Full-Screen blur

In here we use stack widget to add a Flutter logo as a First child and on top of that, we can add a container. To see the blur effect there must be a widget below the widget which we wrap inside BackdropFilter. As a top widget we use a container with a text and Wrap that widget with BackdropFilter widget.

    
    Stack(
          fit: StackFit.expand,
          children: [
                                    FlutterLogo(),
                                    Center(
                                      child: BackdropFilter(
                                        filter: ImageFilter.blur(
                                          sigmaX: 10.0,
                                          sigmaY: 10.0,
                                        ),
                                        child: Container(
                                          alignment: Alignment.center,
                                          child: Text('Hi Frost'),
                                        ),
                                      ),
                                    ),
                         ],
                )
    

BackdropFilter accepts a property called filter and you can set the ImageFilter for that. We use ImageFilter Blur constructor to apply the Gaussian Blur the widget underneath it.

flutter blur container

In Blur constructor, we can set two properties like sigmaX and sigmaY. The blur effect totally depends on these values.

Lets set sigmaX to 20 and sigmaY 0 and see the difference.

flutter image blur

You can see it contain sharp edge in X-axis. Also, you can try to keep sigmaX as 0 and change the sigmaY values. Now you can understand sigma values control for which direction the blur effect need to add. So it good to use balanced values for sigmaX and sigmaY and add a consistent blur effect.

Control the blur area

You can control the area which needs to add Fross Glass effect by wrapping the widget inside the ClipRect widget. Then It will clip the effect based on the child element. As an example, if the child element is 200×200 container, then the effect will be applied only for that area.

    
    Stack(
          fit: StackFit.expand,
          children: [
                                    FlutterLogo(),
                                    Center(
                                      child: ClipRect(
                                        child: BackdropFilter(
                                          filter: ImageFilter.blur(
                                            sigmaX: 10.0,
                                            sigmaY: 10.0,
                                          ),
                                          child: Container(
                                            width: 200,
                                            height: 200,
                                            alignment: Alignment.center,
                                            child: Text('Hi Frost'),
                                          ),
                                        ),
                                      ),
                                    ),
                            ],
                    )
    
You Will Like Also