flutter如何实现外阴影效果

在Flutter中如何给Widget添加外阴影效果？我尝试使用BoxShadow，但效果不太理想，有没有更简单或更灵活的实现方式？希望能给出具体的代码示例和参数说明。

2 回复

在Flutter中，使用Container的BoxDecoration设置boxShadow属性即可实现外阴影效果。例如：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: 5.0,
        offset: Offset(0, 3),
      ),
    ],
  ),
)

其中，color设置阴影颜色，blurRadius控制模糊程度，offset定义阴影偏移。

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


在 Flutter 中，可以通过 Container 组件的 BoxDecoration 的 boxShadow 属性实现外阴影效果。以下是实现方法：

代码示例：

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white, // 容器背景色
    borderRadius: BorderRadius.circular(8), // 圆角（可选）
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5), // 阴影颜色
        blurRadius: 5, // 模糊半径
        spreadRadius: 1, // 扩散范围
        offset: Offset(2, 2), // 阴影偏移量 (x, y)
      ),
    ],
  ),
  child: Text('带阴影的容器'),
)

参数说明：

  • color：阴影颜色，通常用半透明色（如 Colors.grey.withOpacity(0.5)）
  • blurRadius：模糊程度，值越大阴影越模糊
  • spreadRadius：阴影扩散范围，正值为扩大，负值为缩小
  • offset：阴影偏移方向，Offset(水平距离, 垂直距离)

其他方式：

  • 使用 Card 组件（自带阴影效果，通过 elevation 属性调整）
  • 使用 PhysicalModel 组件（提供物理效果的阴影）

适用于按钮、卡片、浮层等需要突出显示的元素。

回到顶部