flutter如何设置阴影模糊效果

在Flutter中，如何为Container或其他Widget设置阴影的模糊效果？我尝试使用BoxShadow的blurRadius属性，但调整数值后效果不明显，有没有更精确的控制方法？比如如何实现类似CSS中box-shadow: 0 4px 12px rgba(0,0,0,0.1)这样的柔和阴影？是否需要结合其他参数（如spreadRadius）或使用第三方包？

2 回复

在Flutter中，可以通过BoxDecoration的boxShadow属性设置阴影模糊效果。示例代码：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5), // 阴影颜色
        blurRadius: 10.0,                    // 模糊半径
        spreadRadius: 2.0,                   // 扩散范围
        offset: Offset(5, 5),               // 阴影偏移
      ),
    ],
  ),
  child: YourWidget(),
)

关键参数说明：

  • blurRadius：控制阴影模糊程度，值越大越模糊
  • spreadRadius：控制阴影扩散范围
  • offset：控制阴影位置偏移

也可以使用PhysicalModel或Card组件快速实现阴影效果。

更多关于flutter如何设置阴影模糊效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过 BoxDecoration 的 boxShadow 属性设置阴影模糊效果，使用 BlurStyle 和 blurRadius 控制模糊样式和程度。

示例代码：

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        blurRadius: 15, // 模糊半径，值越大越模糊
        spreadRadius: 2, // 扩散范围
        offset: Offset(4, 4), // 阴影偏移
        blurStyle: BlurStyle.normal, // 模糊样式
      ),
    ],
  ),
)

参数说明：

  • blurRadius：控制阴影模糊程度，数值越大越模糊
  • spreadRadius：阴影扩散范围
  • offset：阴影偏移位置
  • blurStyle：模糊样式（normal-普通、solid-实体、outer-外阴影、inner-内阴影）

其他实现方式：

  1. 使用 PhysicalModel 组件：
PhysicalModel(
  elevation: 8,
  color: Colors.transparent,
  shadowColor: Colors.black,
  child: Container(
    width: 200,
    height: 100,
    color: Colors.white,
  ),
)
  1. 使用 Card 组件（Material Design）：
Card(
  elevation: 10,
  shadowColor: Colors.black.withOpacity(0.5),
  child: Container(
    width: 200,
    height: 100,
  ),
)

提示：

  • 调整 blurRadius 和 spreadRadius 可获得不同模糊效果
  • 使用 withOpacity() 控制阴影透明度
  • 多个阴影可叠加 boxShadow 数组实现复杂效果
回到顶部