Flutter: Creating the ruler in millimetre

Question

I am creating a ruler app where I can measure anything in millimetre.

Something similar to this app https://play.google.com/store/apps/details?id=org.nixgame.ruler&hl=en_IN but very basic.

I am repeating the Divider widget into a Column widget and keeping a gap of 6.299 as given.

class Ruler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: rulerPin(350),
      ),
    );
  }

  List<Divider> rulerPin(int count) {
    return List.generate(count, (i) {
      return Divider(
        height: 6.299,
        thickness: 1,
      );
    }).toList();
  }
}

But the problem is when I measure with the physical ruler on my mobile phone the values do not match. Check the given screenshots.

I am using this reference Calculate logical pixels from millimeters

Kindly suggest if I am following the correct approach.

check `CustomPaint` class and `MediaQueryData.devicePixelRatio` - for more info about `devicePixelRation` read `Window.devicePixelRatio` documentation — pskink, Oct 28 '20 at 08:03

Mehmet Yaz · Answer 1 · 2020-10-31T17:10:20.917

You have to find out the pixel frequency of the device. Then with MediaQuery you have to add the pins at equal intervals calculated. There may always be shifts in calculations with fixed numbers.

If it does not happen again, it definitely means that there are errors in the parts that give information.(Like pixel frequency information).

I will research for you and edit this answer.

Result: You can calculate in 3 stage;

1) Get DPI (dots per inc)

double dpi = _getDpi();

android : getting the screen density programmatically in android? with method channel

iOS : You can create a dpi list of apple device models.(device list) They are not too much. And then you can get device model with device_info

2 ) Calculate pixel size

Flutter work with logical pixels. So we need known how many logical and how many physical pixels dart Size logicalSize = MediaQuery.of(context).size;

///How many physical pixel for 1 logical pixel
double pixelRatio = MediaQuery.of(context).devicePixelRatio;

///How many  logical pixel for 1 mm.
double pixelCountInMm = dpi / pixelRatio / 25.4;
//e.g output = 7.874015748031496

3 ) Calculate

      ///I am not sure thickness include height
      /// if yes you can set divider height : pixelCountInMm - tickness
      List<Divider> rulerPin(int count) {
        return List.generate(count, (i) {
          return Divider(
            height: pixelCountInMm,
            thickness: 1,
          );
        }).toList();
      }

Flutter: Creating the ruler in millimetre

1 Answers1