颤振-实现CSS径向渐变
我对扑翼是新手。在应用程序中处理背景,但无法模拟准确的CSS径向渐变。这就是我打算复制的内容:
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(3,235,255,1) 0%, rgba(152,70,242,1) 100.2% );
这就是我在颤动中尝试的,但没有得到相同的效果(肯定缺少上面提到的渐变中的许多参数)
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,
// ),
),
如有任何建议,我们将不胜感激。
解决方案
您需要使用RadialGradient
的Center属性来定位渐变。
使用下面的代码,它应该会给出与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的值:
Align(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是从矩形的一侧到矩形的另一侧的距离。因此,水平(或垂直)2.0单位等于矩形的宽度(或高度)。
这意味着您的css代码的10%将对应于-0.8,20%将对应于-0.6,依此类推。
相关文章