如何在Flutter的Text组件中实现内阴影（Inset）效果？

要给Text组件实现内阴影效果，Flutter原生没有直接提供对应API，但可以通过以下两种方案实现类似效果：

方法一：使用ShaderMask（推荐） #

利用ShaderMask结合渐变Shader，将阴影效果仅作用于文字区域，模拟内阴影：

ShaderMask(
  // 混合模式：让渐变只覆盖文字的不透明部分
  blendMode: BlendMode.srcATop,
  shaderCallback: (bounds) => LinearGradient(
    // 阴影色到透明的渐变，可根据需求调整透明度
    colors: [Colors.black.withOpacity(0.6), Colors.transparent],
    // 阴影方向，对应参考图的左上到右下阴影
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    // 控制阴影的范围，0.3表示阴影只延伸到文字30%的深度
    stops: const [0.0, 0.3],
  ).createShader(bounds),
  child: const Text(
    "INSET SHADOW",
    style: TextStyle(
      fontSize: 60,
      fontWeight: FontWeight.bold,
      color: Colors.white, // 文字主色
    ),
  ),
)

调整渐变的方向、颜色透明度和stops参数，就能匹配参考图的内阴影效果。如果需要四周都有内阴影，可以改用RadialGradient，从文字边缘向中心渐变。

方法二：Stack叠加文本模拟 #

通过堆叠多层Text，结合遮罩裁剪出内阴影区域：

Stack(
  alignment: Alignment.center,
  children: [
    // 阴影层：仅保留边缘部分
    ShaderMask(
      blendMode: BlendMode.dstOut,
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.transparent, Colors.black],
        begin: Alignment.center,
        end: Alignment.topLeft,
        stops: const [0.1, 0.3],
      ).createShader(bounds),
      child: const Text(
        "INSET SHADOW",
        style: TextStyle(
          fontSize: 60,
          fontWeight: FontWeight.bold,
          color: Colors.black.withOpacity(0.7),
        ),
      ),
    ),
    // 主文字层
    const Text(
      "INSET SHADOW",
      style: TextStyle(
        fontSize: 60,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
    ),
  ],
)

这种方式通过裁剪阴影文本的中心区域，让边缘阴影透出在主文字下方，实现内阴影的视觉效果。

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