如何在flutter应用程序中调整figma尺寸?

2023-12-23

我设计了 Figma,我需要将其应用到我的 flutter 应用程序中。但我有一定的困难,所以按顺序。

我尝试的第一件事是使用自动导入工具,我尝试过:

  • Adobe XD 到 Flutter

  • 超新星工作室

不幸的是,这些工具仍处于其旅程的开始阶段。它们提供了一些好处,但不提供完全导入

我还使用 Figma 的几个插件:

  • Figma 扑腾

  • Figma 到代码

但这些插件的功能也是有限的。我意识到我需要自己做。

Figma 页面尺寸为 320 像素。设备屏幕尺寸会有所不同。但我需要它看起来尽可能接近。我决定采用“比例法”。我正在使用带有以下扩展名的Figma元素的尺寸:

  //SizeConfig
  screenWidth = _mediaQueryData.size.width;
  screenHeight = _mediaQueryData.size.height;   

  .....
  
  extension SizeDoubleExt on double {

  double h() {
    double screenHeight = SizeConfig.screenHeight;
    var res = (this / 693.0) * screenHeight;
    return res;
  }

  double w() {
    double screenWidth = SizeConfig.screenWidth;
    var res = (this / 320.0) * screenWidth;
    return res;
  }
}

example:

 return Container(  width: 80.w(),    );

但结果并不令我满意。也许我需要考虑devicePixelRatio(逻辑像素),或者“比例方法”是错误的。

主要问题是如何使 Figma 的尺寸适应不同设备的尺寸?

任何建议 - 我将非常感激。


我找到了解决方案。我使用这个插件 -flutter_screenutil https://pub.dev/packages/flutter_screenutil

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在flutter应用程序中调整figma尺寸? 的相关文章

随机推荐