带有渐变到颤动窗口小部件的Figma设计
带有渐变到颤动窗口小部件的Figma设计
提问于 2021-04-02 14:24:48
我有一个简单的Figma设计，其中包含两层
第一层纯色：background: #003274;
具有渐变的第二层：
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: radial-gradient(100% 245.99% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 0px;现在我尝试在Flutter代码中实现这一点，如下所示：
return new Container(
decoration: new BoxDecoration(
color: Color(0xff003274),
gradient: new RadialGradient(
colors: [Color.fromARGB(102, 255, 255, 255), Color.fromARGB(0, 255, 255, 255)],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
)
);结果，我得到了灰色渐变而不是蓝色渐变
你能建议我如何将这个梯度的Figma设计转换成颤动代码吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-02 15:22:47
不知道这是不是最好的方法，但它是有效的。只需将您的Container包装在另一个Container中，并将其color设置为最底层的纯色。
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xff003274),
child: new Container(
decoration: new BoxDecoration(
gradient: new RadialGradient(
colors: [
Color.fromARGB(102, 255, 255, 255),
Color.fromARGB(0, 255, 255, 255)
],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66915244
复制相关文章
相似问题
腾讯云开发者
