Flutter device ratio, How?

[Niyazi Toros]

Hi,

I have a small code from my app as shown below, I use  MediaQuery.of(context) to get device height and width.

Problem is In Samsun S7 Edge looks perfect but when I try to use it on Samsung Note 8 everything fail.

font size as well as as the padding top fails. 

How to calculate device ratio and how to set font size as well as padding based on the device ratio? Is there beter way to accomplish this. Thanks

double _capitalHeight = MediaQuery.of(context).size.height;
double _capitalWidth = MediaQuery.of(context).size.width;

body: NestedScrollView(
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        expandedHeight: _capitalHeight / 3, 
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Text(“MyCard”,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 12.0, // ****** WHAT IS THE SP for this *********
                )),
            background: new Stack(
              children: <Widget>[
                //CARD IMAGE
                new Center(
                  child: new Padding(
                    padding: EdgeInsets.only(top: 25.0), / ****** WHAT IS THE DP for this *********
                    child: Image.asset(
                      _cardImage,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                // CARD NAME
                    new Padding(
                      padding: EdgeInsets.only(top: 10.0), / ****** WHAT IS THE  DP for this *********
                      child: new Text(
                        “CARD NAME“,
                        style: new TextStyle(
                            color: _cardTextColor,
                            fontSize: 18.0, / ****** WHAT IS THE SP for this *********
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),
              ],
            )),
      ),
    ];
  },
  body: *********
),

Also I can get pixelRatio, ScaleFactor as shown below, but I don't know how to set font size as well as padding based on this?

// TODO: #########################################################
//To get width and height of the device screen:
_capitalHeight = MediaQuery.of(context).size.height;
_capitalWidth = MediaQuery.of(context).size.width;
//To get Device Pixel Ratio:
double _myPixelRatio = MediaQuery.of(context).devicePixelRatio;
//To get text scale factor:
double _myScaleFactor = MediaQuery.of(context).textScaleFactor;
print("height: $_capitalHeight");
print("width: $_capitalWidth");
print("pixelRatio: $_myPixelRatio");
print("scaleFactor: $_myScaleFactor");
// print the number of logical pixels for real phones
print("maxWidth = $_capitalWidth / maxHeight = $_capitalHeight");
// TODO: #########################################################

[Niyazi Toros]

Samsung S7 Edge

———————————————————————————

I/flutter (22625): height: 640.0

I/flutter (22625): width: 360.0

I/flutter (22625): pixelRatio: 4.0

I/flutter (22625): scaleFactor: 1.0

Samsung Note 8

———————————————————————————

I/flutter (31626): height: 797.7142857142857

I/flutter (31626): width: 411.42857142857144

I/flutter (31626): pixelRatio: 2.625

I/flutter (31626): scaleFactor: 1.1