Gaussian blur of Flutter image processing

ImageFilter

In Flutter, there are two ways to blur an image, both of which need to be used with ImageFilter.blur().

 factory ImageFilter.blur({ double sigmaX = 0.0, double sigmaY = 0.0, TileMode tileMode = TileMode.clamp })

sigmaX: blurs in the x-axis direction, the larger the value, the more blurred sigmaY
: the blurred in the Y-axis direction, the larger the value, the more blurred

original image

Horizontal blur

ImageFilter.blur(sigmaX: 10, sigmaY: 0)

vertical blur

ImageFilter.blur(sigmaX: 0, sigmaY: 10)

The xy axis is blurred at the same time

ImageFilter.blur(sigmaX: 20, sigmaY: 20)

usage

BackdropFilter

If you are front-end development, you should be familiar with this name. As in CSS, backdrop-filterit is used to achieve the frosted glass effect.

  const BackdropFilter({
    Key? key,
    required this.filter,
    Widget? child,
  })

filter is a ImageFilterfilter, the effect of the filter will be applied to the child widget of the parent Widget, and the filter will not act on the child. Therefore, Stack is generally used, which will be BackdropFilterplaced on top of the picture.

Example:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('blur demo'),
      ),
      body: Stack(
        children: [
          /// 图片在Stack最底层
          Image.asset(
            “assets/images/painting2.jpg”,
          ),
          BackdropFilter(
          	/// 过滤器
            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
            /// 必须设置一个空容器
            child: Container(),
          ),
    }

Note: An empty one must be set in child Container, otherwise the blur effect will not take effect.

local blur

BackdropFilterSupport local blur, must use ClipRector other ClipXXX package.

 body: Stack(
   children: [
     Image.asset(imgs[0]),
     Positioned(
       left: 100,
       right: 100,
       top: 200,
       bottom: 200,
       /// 必须clip，否则会对整个区域模糊。
       child: ClipRect(
         child: BackdropFilter(
           filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
           child: Container(
             alignment: Alignment.center,
             color: Colors.black.withOpacity(0),
             child: Text('child不会被模糊处理'),
           ),
         ),
       ),
     )
   ],
 ),

ImageFiltered

It's very simple to use, just set a filter and add a picture to the child to achieve a blur effect.

 ImageFiltered(
   imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
   child: Image.asset(
     "assets/images/painting2.jpg",
   ),
 )

the difference

Drop is more suitable for dealing with local blur, and the performance is not ImageFilteredgood. Recommended if you only need to blur the entire area of ​​the image ImageFiltered.