Flutter ImageFilter.blur异常：容器边缘出现模糊白边问题

问题描述 #

使用ImageFilter.blur实现图片模糊时，仅中间图片被模糊处理，但容器顶部出现一条模糊白边，无法呈现预期的纯黑色背景。

问题原因 #

原代码中模糊层通过Center包裹，导致模糊区域仅局限于图片尺寸，BackdropFilter的模糊采样会向外扩散，当图片未完全覆盖容器边缘时，会采样到非预期像素（如图片边缘的白色或布局间隙），进而出现白边。同时ClipRect未限制在整个容器范围内，无法阻止模糊效果溢出。

修复方案 #

调整模糊层布局，让其充满整个容器，确保ClipRect裁剪范围覆盖全部可视区域，避免模糊效果溢出到边缘：

修改后的完整代码 #

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.black,
    toolbarHeight: 0,
    elevation: 0,
  ),
  body: SafeArea(
    child: StatefulBuilder(builder: (ctx, _setState) {
      return ColoredBox(
          color: Colors.black,
          child: Align(
            alignment: Alignment.center,
            child: GestureDetector(
              onVerticalDragEnd: (details) {
                if (details.velocity.pixelsPerSecond.dy < -100 ||
                    details.velocity.pixelsPerSecond.dy > 100) {
                  Get.back();
                }
              },
              child: CarouselSlider(
                options: CarouselOptions(
                  viewportFraction: 1,
                  height: double.infinity,
                  enableInfiniteScroll: false,
                  disableCenter: true,
                  autoPlayCurve: Curves.bounceOut,
                  initialPage: widget.activeSlide,
                  onPageChanged: (page, _reason) {
                    _setState(() => widget.activeSlide = page);
                  },
                  scrollPhysics: kDefaultScrollPhysics
                ),
                items: widget.post.images.map((image) {
                  return Builder(
                    builder: (BuildContext context) => Stack(
                      fit: StackFit.expand, // 让Stack充满父容器
                      children: [
                        // 底层全屏覆盖的图片
                        Image.network(
                          ApiConfig.ensureUrl(image.original) + image.original,
                          fit: BoxFit.cover,
                        ),
                        // 充满整个容器的模糊层
                        ClipRect(
                          child: BackdropFilter(
                            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                            child: Container(
                              color: Colors.transparent, // 透明容器承载模糊效果
                            ),
                          ),
                        ),
                        // 居中显示的原图
                        Center(
                          child: Image.network(
                            ApiConfig.ensureUrl(image.original) + image.original,
                            fit: BoxFit.contain,
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
              ),
            ),
          ));
    }),
  ),
);

关键修改点 #

• 给Stack添加fit: StackFit.expand，使其充满父容器，确保所有子组件都在黑色背景范围内。
• 移除模糊层的Center包裹，让ClipRect和BackdropFilter直接充满整个Stack，模糊效果仅作用于底层全屏图片，边缘由黑色背景填充，不会出现白边。
• 将模糊层的Container简化为color: Colors.transparent，无需额外的BoxDecoration。

效果验证 #

修改后，模糊效果会正确作用于全屏的底层图片，容器边缘将完全呈现黑色背景，不会再出现模糊白边，同时居中的原图保持清晰显示。

内容的提问来源于stack exchange，提问作者Aram Zargaryan