Flutter - 实现 CSS 径向渐变

Question

我是颤振新手。在应用程序中处理背景，但无法模拟精确的 CSS 径向渐变。这就是我打算复制的：

background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(3,235,255,1) 0%, rgba(152,70,242,1) 100.2% );

这是我在 Flutter 中尝试过的，但无法获得相同的效果（肯定缺少上面提到的渐变中的许多参数）

Container(
          width: deviceSize.width,
          height: deviceSize.height,
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Color.fromRGBO(3,235,255,1),
                Color.fromRGBO(152,70,242,1)
              ],
              radius: 1.0,
            ),
            boxShadow: [
              BoxShadow(blurRadius: 2),
            ],
          ),
          // child: const Image(
          //   image: AssetImage(
          //     'lib/assets/images/main_background.jpg',
          //   ),
          //   fit: BoxFit.cover,
          // ),
        ),

如有任何建议，将不胜感激，提前致谢。

Answer 1

您需要使用 的 center 属性RadialGradient来定位渐变。

使用下面的代码，它应该在 Flutter 中为您提供与 CSS 代码相同的设计：

 gradient: RadialGradient(
      center: Alignment(-0.8, -0.6),
      colors: [
        Color.fromRGBO(3, 235, 255, 1),
        Color.fromRGBO(152, 70, 242, 1)
      ],
      radius: 1.0,
    ),

PS：我从文档中得出了值 -0.8 和 -0.6 ：

Alignment(0.0, 0.0) 表示矩形的中心。从 -1.0 到 +1.0 的距离是从矩形的一侧到矩形的另一侧的距离。因此，水平（或垂直）2.0 个单位相当于矩形的宽度（或高度）。

因此，这意味着 CSS 代码中的 10% 对应于 -0.8，20% 对应于 -0.6，依此类推。