Flutter：ImageFilter.blur()模糊文本边缘被裁剪的解决办法

你遇到的问题是因为模糊效果会扩散到Text组件的布局边界之外，而Flutter默认会裁剪超出子组件布局范围的内容，导致模糊边缘被截断。

核心解决方案 #

给Text组件添加与模糊sigma值匹配的内边距，让模糊效果有足够的展示空间，避免被裁剪。内边距的大小建议设置为sigma值的1.5倍左右（比如sigma=10时，内边距设为15），可以根据实际模糊强度调整。

修改后的代码示例 #

return ImageFiltered(
  imageFilter: ImageFilter.blur(
    tileMode: TileMode.clamp,
    sigmaX: 10,
    sigmaY: 10,
  ),
  child: Padding(
    // 根据sigma值调整内边距，确保模糊扩散空间充足
    padding: EdgeInsets.all(15),
    child: Text(
      "Sample Text",
      style: TextStyle(fontSize: 30),
    ),
  ),
);

为什么之前的尝试未生效？ #

• 若将内边距加在ImageFiltered外部，模糊效果依然会被Text组件的布局边界裁剪，必须把内边距放在ImageFiltered内部、Text外部。
• 若之前添加的内边距尺寸不足，当sigma值足够大时，模糊扩散范围会超过预留空间，依然会出现裁剪。

替代方案（可选） #

如果需要给模糊区域添加背景色，可以用Container包裹Text，同时设置padding和背景：

return ImageFiltered(
  imageFilter: ImageFilter.blur(
    tileMode: TileMode.clamp,
    sigmaX: 10,
    sigmaY: 10,
  ),
  child: Container(
    padding: EdgeInsets.all(15),
    color: Colors.white, // 可选：添加背景色让模糊效果更清晰
    child: Text(
      "Sample Text",
      style: TextStyle(fontSize: 30),
    ),
  ),
);

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