Flutter 高斯模糊效果详解

1.高斯模糊不限定大小

1.1-代码封装

import 'dart:ui';
/// describe
/// 高斯模糊效果合集
/// created by hujintao
/// created at 2019-09-12
//
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fpdxapp/utils/screen.dart';

/// 矩形高斯模糊效果
class BlurRectWidget extends StatefulWidget {
  final Widget child;

  /// 模糊值
  final double sigmaX;
  final double sigmaY;

  /// 透明度
  final double opacity;

  /// 外边距
  final EdgeInsetsGeometry blurMargin;

  /// 圆角
  final BorderRadius borderRadius;

  const BlurRectWidget({
    Key key,
    this.child,
    this.sigmaX,
    this.sigmaY,
    this.opacity,
    this.blurMargin,
    this.borderRadius,
  }) : super(key: key);

  @override
  _BlurRectWidgetState createState() => _BlurRectWidgetState();
}

class _BlurRectWidgetState extends State<BlurRectWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: widget.blurMargin != null
          ? widget.blurMargin
          : EdgeInsets.only(bottom: ScreenUtil().setHeight(20)),
      child: ClipRRect(
        borderRadius: widget.borderRadius == null ? BorderRadius.only(
            topLeft: Radius.circular(10), topRight: Radius.circular(10)) : widget.borderRadius,
        child: BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: this.widget.sigmaX != null ? this.widget.sigmaX : 10,
            sigmaY: this.widget.sigmaY != null ? this.widget.sigmaY : 10,
          ),
          child: Container(
            color: Colors.white10,
            child: this.widget.opacity != null
                ? Opacity(
                    opacity: widget.opacity,
                    child: this.widget.child,
                  )
                : this.widget.child,
          ),
        ),
      ),
    );
  }
}

1.2 使用

Stack(
  overflow: Overflow.clip,
  alignment: Alignment(-1, 1),
  children: <Widget>[
    // 背景图片
    Container(
      decoration: BoxDecoration(
          color: Color(0xffF3F4F5),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
          image: DecorationImage(
              image: NetworkImage(getBackgroundImage(item)),
              fit: BoxFit.cover) //设置图片的填充模式
          ),
      margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(20)),
    ),
    // 矩形高斯模糊效果
    BlurRectWidget(
      child: Container(),
      sigmaY: alpha,
      sigmaX: alpha,
    ), 
    ],
)

1.3 效果图

image.png

2.高斯模糊限定容器大小

关键代码

// 头像
  Stack(
    alignment: Alignment.center,
    children: <Widget>[
      // 头像
      Container(
        width: ScreenUtil().setWidth(90),
        height: ScreenUtil().setWidth(90),
        decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(
                ScreenUtil().setWidth(45)),
            image: DecorationImage(
              alignment: Alignment.center,
              image: NetworkImage(
                item != null && item.user.headimgurl != null
                    ? item.user.headimgurl
                    : '',
              ),
            )),
      ),
      // 高斯模糊
      Stack(
        children: <Widget>[
          Center(
            child: ClipOval(
              child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: alpha,
                  sigmaY: alpha,
                ),
                child: Container(
                  alignment: Alignment.center,
                  width: ScreenUtil().setWidth(90),
                  height: ScreenUtil().setWidth(90),
                  child: Text(
                    '   ',
                    style: TextStyle(fontSize: 20),
                  ),
                  color: Colors.white10,
                ),
              ),
            ),
          ),
        ],
      )
    ],
  ),

效果图

image.png