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

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

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，依此类推