Flutter 如何实现覆盖四边的LinearGradient线性渐变效果？

实现方案 #

你原来的LinearGradient只设置了单一方向的渐变，因此只能覆盖两条对边，要实现四条边都有渐变过渡，可以用下面两种方案：

方案1：双层线性渐变叠加 #

通过嵌套两层Container，分别设置横向和纵向的线性渐变，叠加后即可覆盖四条边：

Container(
  decoration: BoxDecoration(
    // 横向渐变：处理左右两条边
    gradient: LinearGradient(
      colors: [
        kRecordButtonColor.withOpacity(0.4),
        kRecordButtonColor,
        kRecordButtonColor,
        kRecordButtonColor.withOpacity(0.4),
      ],
      stops: const [0, 0.2, 0.8, 1],
    ),
  ),
  child: Container(
    decoration: BoxDecoration(
      // 纵向渐变：处理上下两条边
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          kRecordButtonColor.withOpacity(0.4),
          Colors.transparent,
          Colors.transparent,
          kRecordButtonColor.withOpacity(0.4),
        ],
        stops: const [0, 0.2, 0.8, 1],
      ),
    ),
    // 这里放置你的子组件内容
  ),
)

方案2：径向渐变简化实现 #

如果不需要区分不同边的渐变参数，用径向渐变实现更简洁，可直接覆盖四边：

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      center: Alignment.center,
      radius: 0.8,
      colors: [
        kRecordButtonColor,
        kRecordButtonColor.withOpacity(0.4),
      ],
      stops: const [0.8, 1],
    ),
  ),
  // 这里放置你的子组件内容
)

内容的提问来源于stack exchange，提问作者who-aditya-nawandar