Flutter - 实现 CSS 径向渐变答案

【问题标题】：Flutter - Implementing CSS radial gradientsFlutter - 实现 CSS 径向渐变
【发布时间】：2020-07-20 06:17:32
【问题描述】：

我是 Flutter 的新手。在应用程序的背景上工作，但无法模拟精确的 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,
          // ),
        ),

如果有任何建议，将不胜感激，在此先感谢。

【问题讨论】：

标签： css flutter gradient radial-gradients

【解决方案1】：

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

使用下面的代码，它应该在 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：我从docs 中得出了值 -0.8 和 -0.6：

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

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

【讨论】：