Defined Size as dp and sp not as percentage.

[rrifafauzikomara]

I see your package to defined size is as a percentage (Max to define the size is 100, ex: 100.0.w / 100.0.h --> it's mean the size is 100% / full screen). But can we specify the size is not using a percentage but using a dp for width and height and a sp for the font?

For example, if in the mockup get the size for the font is 14, so we can't implement your package like this:

style: TextStyle(fontSize: 14.0.sp), // This is not sp, but the font size is 14% from the screen. So it not accurate with the size in the mockup that created by designer.

Also if in the mockup get width is 100 and height is 50 for the Button, so we can't implement your package like this:

SizedBox(
   width: 100.0.w,  // This is not accurate with the size in the mockup that created by designer.
   height: 50.0.h, // This is not accurate with the size in the mockup that created by designer.
   child: RaisedButton(),
),

I think this is the major issue.

[huynhphan89]

@rrifafauzikomara we make an extension like this to work with sizes in the mockup

extension DoubleExt on double {
  static const standardWidth = 1440.0;
  static const standardHeight = 1010.0;

  double textSize() {
    return this * MediaQuery.of(Get.context).size.width / standardWidth;
  }

  double width() {
    return (this / standardWidth * 100).w;
  }

  double height() {
    return (this / standardHeight * 100).h;
  }
}

[zyllus17]

@rrifafauzikomara we make an extension like this to work with sizes in the mockup

extension DoubleExt on double {
  static const standardWidth = 1440.0;
  static const standardHeight = 1010.0;

  double textSize() {
    return this * MediaQuery.of(Get.context).size.width / standardWidth;
  }

  double width() {
    return (this / standardWidth * 100).w;
  }

  double height() {
    return (this / standardHeight * 100).h;
  }
}

Can you show how to use it and where should I put this extension method.