如何解决如何将线性梯度从 Figma 转换为 Flutter/Dart 代码
我在 figma 中有一个包含线性渐变颜色的设计,我想将其导入到 Dart 代码中。
设计是这样的
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]),),);
}
}
截图
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。