带有渐变到 Flutter 小部件的 Figma 设计

Question

我有一个包含两层的简单 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 设计转换为 Flutter 代码吗？

Answer 1

不知道这是否是最好的方法，但它有效。只需将您的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,
        ),
      ),
    );
  }