如何将线性梯度从 Figma 转换为 Flutter/Dart 代码

问题描述

我在 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 到 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,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]),),);
  }
}

截图

Try the full code on DartPad