Flutter

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

非常感谢任何建议，提前致谢。

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：我从 docs:

中得出值 -0.8 和 -0.6

Alignment(0.0, 0.0) represents the center of the rectangle. The distance from -1.0 to +1.0 is the distance from one side of the rectangle to the other side of the rectangle. Therefore, 2.0 units horizontally (or vertically) is equivalent to the width (or height) of the rectangle.

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

Flutter - 实现 CSS 径向渐变

Flutter - Implementing CSS radial gradients

css

gradient

radial-gradients