如何在Flutter中实现类似设计稿的径向渐变效果？

你的Flutter代码存在几个关键问题导致效果偏差，调整以下几点就能对齐设计稿：

1. 修正颜色错误：你误用了紫色透明色，CSS里渐变的终点是白色完全透明，不是紫色。
2. 匹配渐变扩散范围：CSS的radial-gradient(50% 50% at 50% 50%, ...)指定了渐变尺寸为容器的50%（圆心在中心），Flutter需要通过radius参数对应这个范围。
3. 简化渐变层级：CSS是「渐变层 + 纯色背景」，不需要在渐变里加第三个颜色，直接给容器设置纯色背景即可。

修正后的Flutter代码 #

Container(
  decoration: BoxDecoration(
    // 底层纯色背景，对应CSS的#15636D
    color: AppColors.primary,
    gradient: RadialGradient(
      center: Alignment.center, // 对应CSS的at 50% 50%
      radius: 0.5, // 对应CSS的50%渐变尺寸，可微调0.4~0.6匹配效果
      stops: const [0.0, 1.0], // 明确颜色断点，对应CSS的0%和100%
      colors: const [
        Color.fromRGBO(255, 255, 255, 0.116), // 起始色
        Color.fromRGBO(255, 255, 255, 0.0), // 终点色（白色完全透明）
      ],
    ),
  ),
)

微调技巧 #

如果效果还是有差异，可以调整radius的数值：

• 数值越小，渐变扩散范围越集中（更接近中心）
• 数值越大，渐变覆盖范围越广

如果极端情况下还是无法完全匹配，再考虑用背景图片替代是可行的方案。

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