CODEWITHSUNDEEP
flutterresolutiondpi
Omega
Omega

Reputation: 65

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.

Upvotes: 0

Views: 423

Answers (2)

TylerH
TylerH

Reputation: 21100

Migrating OP's solution from the question to an answer:

I came with a better alternative to scale up text with the code below (insert inside the MaterialApp widget/root of the code):

builder: (context, child) {
 return MediaQuery(
   child: child,
   data: MediaQuery.of(context).copyWith(textScaleFactor: 1.20),
 );
},

Upvotes: 0

Rémi Rousselet
Rémi Rousselet

Reputation: 276881

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.

Upvotes: 1

Related Questions