Flutter中如何实现内阴影效果与渐变背景色？

如果你已经掌握InnerShadow的使用，要给背景添加渐变效果，核心思路就是将渐变背景与InnerShadow做层叠组合，下面给你两种实用的实现方式：

方式一：InnerShadow直接包裹渐变容器 #

直接在InnerShadow的child属性中放置一个带渐变背景的Container，内阴影会自动叠加在渐变背景之上：

InnerShadow(
  blur: 8,
  color: Colors.black.withOpacity(0.3),
  offset: const Offset(2, 2),
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      gradient: const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Color(0xFFE8F5E9), Color(0xFFC8E6C9)],
      ),
    ),
  ),
)

方式二：用Stack实现灵活层叠 #

如果需要在渐变背景上叠加其他元素，用Stack分层布局更合适，注意InnerShadow要放在渐变背景的上层：

Stack(
  children: [
    // 渐变背景层
    Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        gradient: const RadialGradient(
          center: Alignment.center,
          radius: 1,
          colors: [Color(0xFFFFF9C4), Color(0xFFFFE082)],
        ),
      ),
    ),
    // 内阴影层（需和背景容器尺寸一致）
    InnerShadow(
      blur: 10,
      color: Colors.black.withOpacity(0.4),
      offset: const Offset(0, 3),
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: Colors.transparent, // 设为透明才能透出下层渐变
        ),
      ),
    ),
  ],
)

关键注意事项 #

• InnerShadow的尺寸必须和渐变背景容器保持一致，避免阴影错位
• 使用Stack时，InnerShadow的子容器要设置color: Colors.transparent，否则会遮挡下层渐变
• 可通过调整InnerShadow的blur、color、offset参数，让阴影与渐变背景更自然融合——比如深色渐变搭配高透明度阴影，浅色渐变用低透明度阴影

你提到的示例图效果，就是通过这种层叠方式实现的：容器背景为渐变色彩，边缘带有向内的阴影，增强整体立体感。

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