Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Creating the ruler in millimetre

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.

enter image description here

I am using this reference Calculate logical pixels from millimeters

Kindly suggest if I am following the correct approach.

like image 825
Mohd Shahid Avatar asked Oct 23 '20 06:10

Mohd Shahid


1 Answers

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();
      }
like image 99
Mehmet Yaz Avatar answered Nov 18 '22 22:11

Mehmet Yaz