如何将指定CSS radial-gradient转换为Flutter渐变

你提供的CSS径向渐变background: radial-gradient(50% 50% at 50% 50%, #1AD4FD 0%, #2588FD 100%);可直接映射为Flutter的RadialGradient组件，实现代码如下：

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      // 对应CSS的"at 50% 50%"，渐变中心在容器正中央
      center: Alignment.center,
      // 对应CSS的"50% 50%"，渐变范围覆盖容器一半尺寸
      radius: 0.5,
      colors: const [
        Color(0xFF1AD4FD), // 起始色 #1AD4FD
        Color(0xFF2588FD), // 结束色 #2588FD
      ],
      stops: const [0.0, 1.0], // 对应0%和100%的色标位置
    ),
  ),
  // 可添加子组件
  child: ...,
)

参数对应说明 #

• center: Alignment.center：匹配CSS中渐变中心定位规则，确保渐变从容器正中心触发。
• radius: 0.5：Flutter中radius为相对值，1.0代表从中心到容器最远边缘的距离，0.5对应CSS里50% 50%的渐变覆盖范围。
• colors与stops：分别对应CSS中的颜色序列和色标位置，stops明确指定颜色过渡的起止节点。

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