how to adapt figma sizes to in flutter app?

Question

I have design Figma, I need to apply this in my flutter app. but I have certain difficulties, so in order.

The first thing I tried was to use auto import tools, I tried:

• Adobe XD to Flutter

• Supernova Studio

Unfortunately these tools are still at the beginning of their journey. they provide some benefit, but do not give full imports

Also I use several plugins for Figma:

• Figma to flutter

• Figma to code

but the capabilities of these plugins are also limited. I realized that I need to do it myself.

Figma page dimensions are 320 px. Device screen sizes will vary. but I need it to look as close as possible. I decided to use the "proportional approach". I am using the dimensions of the figma elements with the following extension:

  //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(),    );

but the result does not satisfy me. maybe I need to consider devicePixelRatio(logical pixel), or the "proportional method" is wrong.

The main question is how do I adapt the dimensions(sizes) of the figma to the sizes of different devices?

any advice - I would be very grateful.

Solution

I found solution. I use this plugin - flutter_screenutil

Comments

[Burak]

Did you find any solutions?

[FetFrumos]

Yes, see my answer