如何为Flutter的BoxDecoration添加模糊效果？现有方案失效

我已经花了好几个小时尝试给BoxDecoration添加模糊效果，但始终无法实现，ChatGPT也没能提供有效帮助。

我的原代码如下：

class CustomNavItem extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool isSelected;

  const CustomNavItem(
      {required this.icon, required this.label, required this.isSelected});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(icon),
        Container(
          decoration: BoxDecoration(
            border: isSelected
                ? Border(
                    bottom: BorderSide(
                        color: Theme.of(context).primaryColor, width: 3))
                : null,
          ),
          child: Text(
            label,
            style: TextStyle(
              color: isSelected ? Colors.black : Colors.grey[600],
            ),
          ),
        ),
      ],
    );
  }
}

我尝试过多个版本的代码，但都会导致整个应用被模糊，比如这段代码：

[...]
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(icon),
        Text(
          label,
          style: TextStyle(
            color: isSelected ? Colors.black : Colors.grey[600],
          ),
        ),
        isSelected
            ? BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                child: Container(
                  height: 3,
                  width: 50, // 你可以根据需要调整宽度
                  color: Theme.of(context).primaryColor.withAlpha(0), // 半透明
                ),
              )
            : Container(
                height: 3,
                width: 50, // 和上面的Container宽度一致
                color: Colors.transparent,
              ),
[...]

问题原因 #

BackdropFilter的模糊效果默认会扩散到父组件的所有区域，因为Flutter的渲染机制中，模糊会作用于其绘制上下文内的所有底层内容，没有被裁剪的话就会影响整个页面。

解决方案 #

要实现局部模糊，需要用ClipRect包裹BackdropFilter，或者给承载BackdropFilter的父容器设置clipBehavior: Clip.hardEdge，以此限制模糊的作用范围。同时，如果你想让选中的底部边框带有模糊背景，可以调整结构，将模糊层放在边框下方：

class CustomNavItem extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool isSelected;

  const CustomNavItem({
    required this.icon,
    required this.label,
    required this.isSelected,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon),
        const SizedBox(height: 4),
        Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Text(
              label,
              style: TextStyle(
                color: isSelected ? Colors.black : Colors.grey[600],
              ),
            ),
            if (isSelected)
              ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                  child: Container(
                    height: 3,
                    width: 50,
                    // 这里可以设置模糊层的底色，配合半透明实现效果
                    color: Theme.of(context).primaryColor.withOpacity(0.3),
                  ),
                ),
              ),
          ],
        ),
      ],
    );
  }
}

说明 #

1. 使用Stack将文本和模糊底部条叠加，保证模糊层在文本下方
2. ClipRect包裹BackdropFilter，限制模糊仅作用于Container的范围内，不会扩散到整个应用
3. 调整模糊层的color透明度，可以实现不同的模糊底色效果，同时保留背景内容的模糊观感

内容的提问来源于stack exchange，提问作者Bruno Paiva