css - 如何将线性渐变从 Figma 转换为 Flutter/Dart 代码

Question

我在 Figma 中有一个包含线性渐变颜色的设计，我想将其导入 Dart 代码。

设计看起来像这样

颜色代码在 Figma 中的 CSS 中提供

background: linear-gradient(110.52deg, #FFE080 0%, #CB5F00 100%);
border-radius: 15px;

我想将 CSS 转换为 Dart 以尽可能接近设计，我找到了两种方法来做到这一点，但它们都没有给我准确的颜色。

尝试 1 - CSS 到 Flutter 代码网站 - https://flutterkit.github.io/c2f/

该站点以 Flutter 无法理解的百分比转换为以下代码。

尝试 2- Figma to Flutter 插件 - https://www.figma.com/community/plugin/844008530039534144/FigmaToFlutter

这给了我一个在 Flutter 中工作的代码，但不是确切的设计。

Container(
        width: 340,
        height: 208,
        decoration: BoxDecoration(
          borderRadius : BorderRadius.only(
            topLeft: Radius.circular(15),
            topRight: Radius.circular(15),
            bottomLeft: Radius.circular(15),
            bottomRight: Radius.circular(15),
          ),
      gradient : LinearGradient(
          begin: Alignment(0.5841947793960571,0.20964664220809937),
          end: Alignment(-0.20964664220809937,0.21863843500614166),
          colors: [Color.fromRGBO(255, 223, 127, 1),Color.fromRGBO(202, 95, 0, 1)]
        ),
  ),
),

这给了我这个与原始设计相反的图像，并且在角落处更暗更亮。

我想坚持尽可能接近设计，而不是使用一些猜测工作。请帮我。

Answer 1

我对您生成的代码进行了一些小改动，以便获得更好的结果：

代码示例

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final color1 = Color(0xFFFFE080);
    final color2 = Color(0xFFCB5F00);
    return Container(
      width: 340,
      height: 208,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        gradient: LinearGradient(colors: [color1, color2]),
      ),
    );
  }
}

截屏

在 DartPad 上试用完整代码