How to make flutter widget blurred

How to make flutter widget blurred

We need three major things to make blur effect

1.Stack
2.BackdropFilter
3.ImageFilter.blur

First you have create a 'Stack', and first child of stack will be the item you wants to blurred and second child will be your blur widget.

As you can see the below code...

Stack(
      children: <Widget>[
        Container(child: Text( "Hello")),              // First child
        BlurryEffect(0.5,0.1,Colors.grey.shade200)    //  Second Child
      ],
    )

Second you have to do is to make a 'BackdropFilter'. BackdropFilter filter provide filter to existing content and paint its child.

Note- Filter will occupy whole area within its parent and If there is no clip then filter will apply to whole screen. So you can adjust the filter size according to your requirement.

Container(
 child: ClipRect(
  child:  BackdropFilter(
    //  Filter
    //  Child
  ),
 ),
);

Third 'ImageFilter.blur',  ImageFilter is the class to apply operation on raster image and ImageFilter.blur is to provide a Gaussian blur.

BackdropFilter(
  ///Creates an image filter that applies a Gaussian blur.
  filter:  ImageFilter.blur(sigmaX:0.4, sigmaY:0.4),
  child:  Container(
    width: double.infinity,
    height:  double.infinity,
    decoration:  BoxDecoration(color: shade.withOpacity(0.5)), /// Set Opacity
)

Now the full example code is-

Stack(
     children: <Widget>[
       Container(child: Text( "Hello")),              // First child
       BlurryEffect(0.5,0.1,Colors.grey.shade200)    //  Second Child
     ],
)

class BlurryEffect extends StatelessWidget {
  final double opacity;
  final double blurry;
  final Color shade;

  BlurryEffect(this.opacity,this.blurry,this.shade);
                                                                           
    @override  Widget build(BuildContext context) {
    return Container(
      child: ClipRect(
        child:  BackdropFilter(
          filter:  ImageFilter.blur(sigmaX:blurry, sigmaY:blurry),
            child:  Container(
              width: double.infinity,
              height:  double.infinity,
              decoration:  BoxDecoration(color: shade.withOpacity(opacity)),
             ),
           ),
          ),
        );
  }
}

• Tweet
• Share
• Share
• Share
• Share

Related Post