flutter开发实战-BackdropFilter高斯模糊子Widget控件

flutter开发实战-BackdropFilter高斯模糊子Widget。

最近开发过程中遇到需要将控件进行模糊，比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter

一、BackdropFilter

BackdropFilter属性定义

BackdropFilter({Key key, 
     @required ImageFilter filter,
     Widget child })

其中ImageFilter的filter是必须传的，child为子控件。

ImageFilter一下两种两种构造方法

• 设置背景高斯模糊

//构造一个设置高斯模糊的ImageFilter，sigmaX，sigmaY用来控制

//模糊度，取值范围是0-10
ImageFilter.blur({double sigmaX: 0.0, double sigmaY: 0.0 })

• 矩阵变换

ImageFilter.matrix(
        Float64List matrix4, 
        { FilterQuality filterQuality: FilterQuality.low })

二、实现模糊效果的控件Widget

这里我们实现一个实现设置背景高斯模糊的Widget

import 'package:flutter/material.dart';
import 'dart:ui';

/// 矩形高斯模糊效果
class BlurWrapperWidget extends StatefulWidget {
  const BlurWrapperWidget({
    Key? key,
    required this.child,
    required this.sigmaX,
    required this.sigmaY,
    required this.opacity,
    this.blurMargin,
    this.borderRadius,
  }) : super(key: key);

  final Widget child;

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

  /// 透明度
  final double opacity;

  /// 外边距
  final EdgeInsetsGeometry? blurMargin;

  /// 圆角
  final BorderRadius? borderRadius;

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

class _BlurWrapperWidgetState extends State<BlurWrapperWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: widget.blurMargin != null
          ? widget.blurMargin
          : EdgeInsets.only(bottom: 0.0),
      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,
          ),
        ),
      ),
    );
  }
}

三、小结

flutter开发实战-BackdropFilter高斯模糊子Widget。
最近开发过程中遇到需要将控件进行模糊，比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter。

学习记录，每天不停进步。