Flutter - 实现CSS径向渐变

Question

我是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,
          // ),
        ),

希望能得到任何建议，提前感谢。

- ishon19

Answer 1

您需要使用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，以此类推。

- Victor Eronmosele