如何在Flutter应用程序中适应Figma大小？

Question

我有一个设计好的Figma，需要将其应用到我的Flutter应用程序中。但我遇到了一些困难，因此按顺序解决。

我尝试的第一件事是使用自动导入工具，我试过以下工具：

- Adobe XD转Flutter - Supernova Studio

不幸的是，这些工具仍处于起步阶段，虽然有一些好处，但并不能完全导入。

我还使用了几个Figma插件：

- Figma到Flutter - 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;
  }
}

例子：

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

但结果并不令我满意。也许我需要考虑设备像素比（逻辑像素），或者“比例方法”是错误的。

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

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

- FetFrumos

---

你找到任何解决方案了吗？ - Burak

是的，请查看我的回答。 - FetFrumos

Answer 1

我找到了解决方案。我使用了这个插件 - flutter_screenutil

- FetFrumos