how do i do the �frosted glass� effect in flutter?

Iridescent Glass impact is somewhat basic impact utilized in the iOS application. The fundamental thought of adding iridescent glass impact in the utilization of demonstrating the view which needs to center in a spotless climate while obscuring the other substance to make that less core interest.

Vacillate gives the simple inbuild gadget to make a Frosted glass impact in your and this will work both in iOS and Android very well.

BackdropFilter gadget in Flutter can use to obscure the picture, holder and numerous different gadgets also.

Full-Screen blur

In here we use stack gadget to add a Flutter logo as a First youngster and in addition, we can add a holder. To see the haze impact there should be a gadget beneath the gadget which we wrap inside BackdropFilter. As a top gadget we utilize a holder with a book and Wrap that gadget with BackdropFilter gadget.

    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 acknowledges a property called channel and you can set the ImageFilter for that. We use ImageFilter Blur constructor to apply the Gaussian Blur the gadget under it.

flutter blur container

In Blur constructor, we can set two properties like sigmaX and sigmaY. The haze impact absolutely relies upon these qualities.

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

flutter image blur

You can see it contain sharp edge in X-pivot. Likewise, you can attempt to keep sigmaX as 0 and change the sigmaY esteems. Presently you can comprehend sigma esteems control for which course the haze impact need to add. So it great to utilize adjusted qualities for sigmaX and sigmaY and add a steady haze impact.

Control the blur area

You can handle the zone which needs to add Fross Glass impact by wrapping the gadget inside the ClipRect gadget. At that point It will cut the impact dependent on the youngster component. For instance, on the off chance that the youngster component is 200×200 holder, at that point the impact will be applied uniquely for that zone.

   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'),
                                          ),
                                        ),
                                      ),
                                    ),
                            ],
                    )
    

Thanks for reading this article ❤
If I got something wrong, Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.

Leave a Comment