Flutter中使用BackDropFilter无法实现预期效果的问题咨询

BackdropFilter的工作机制是对其下方层级的所有内容应用模糊效果，默认情况下它不会被父容器的边界自动裁剪，因此你的模糊效果会扩散到整个Stack区域，覆盖了封面图片。

要限制模糊效果仅在指定Container范围内生效，需给BackdropFilter添加裁剪组件（如ClipRect），将模糊范围约束在容器边界内。同时调整结构，把半透明背景与模糊效果分离，确保模糊只作用于容器区域内的背景内容。

修改后的关键代码片段：

Positioned(
  bottom: 0,
  child: Container(
    height: size.height * 0.2,
    width: size.width,
    child: ClipRect( // 添加裁剪组件，限制模糊范围
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 3.5, sigmaY: 3.5),
        child: Container( // 放置半透明背景和内容
          color: const Color.fromARGB(189, 49, 49, 49),
          child: Row(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    product.title!,
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  Text(
                    product.subtitle!,
                    style: Theme.of(context)
                        .textTheme
                        .headline5!
                        .copyWith(fontSize: 16, color: Colors.white54),
                  ),
                  // Rate
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(
                          Ionicons.star,
                          color: Constants.mainAppColor,
                        ),
                        const SizedBox(width: 12),
                        Text(
                          product.rate.toString(),
                          style: Theme.of(context).textTheme.headline5,
                        ),
                        const SizedBox(width: 12),
                        Text(
                          '(${product.rate})',
                          style: Theme.of(context)
                              .textTheme
                              .headline6!
                              .copyWith(color: Colors.white54, fontSize: 15),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  ),
),

• ClipRect会裁剪其子组件的绘制区域，让BackdropFilter的模糊效果仅在容器的矩形范围内生效，不会溢出到封面图片区域。
• 将半透明背景色从外层Container移至BackdropFilter的子容器中，这样模糊效果会作用于该半透明背景与下方的封面图片局部，同时被ClipRect约束在容器内，匹配你的预期效果。

内容的提问来源于stack exchange，提问作者Bin Emmanuel