Search code examples
flutterresolutiondpi

Isn't flutter supposed to scale down or up images and text based on the design? Why am I seeing a big difference?

I have an app that should comply with the design, but the problem I am facing is that the differences in resolutions make the content of the app look small compared to other apps. I have provided a screenshot of 2 different devices (Samsung Galaxy S10 5G and LG X500) and the original Sketch design to show what I am trying to make clear.

My designer is telling me to convert pt to dp to solve the current issue we are facing, but doesn't Flutter do that already? I found a source explaining about this yesterday: What is unit of measurement in flutter

I haven't tried anything else besides the regular implementation way in Flutter, so I am very much confused and stressed.

2 devices:

enter image description here

original sketch design:

enter image description here

Text:

Text( '\$', 
  style: TextStyle( 
    fontSize: 28, 
    color: Colors.white, 
    fontFamily: 'poppins_light', 
    height: 0.7 
  ), 
),

Image.asset('assets/images/refresh.png', height:16.0, width: 16.0,),

I would like to know if there are more developers who face the same issue as I do right now and what kind of solutions there are to solve the current issue I am facing.

Solution

  • The fact is, DP to on screen size is not a constant ratio.

    Flutter does use DP, but the specs of the unit makes that it can appear bigger/smaller on different screens.

    For that reason you should just use the values provided by your designer and let it be.