Flutter: How can I resize text based on device's screen size

Question

In flutter, how can I resize text in an app based on device screen size? The app is used for reading text, I need users to see bigger text as their device size increases and also set a maximum possible size. One way I know is doing this;

Text(
  'Some text here',
  style: TextStyle(
    fontSize: 20 * MediaQuery.of(context).size.width * some_ratio
  ),
)

Is there a different way of doing this that will also take into consideration display height as well?

Answer 1

For font size based on screen, I would suggest using Height as reference.

for example:

 double unitHeightValue = MediaQuery.of(context).size.height * 0.01;
 double multiplier = 25;
 return Text(
  'Some Text', 
  style: TextStyle(
    fontSize: multiplier * unitHeightValue,
  ),
 );

By this approach, you will get Pixel perfect Text size with an additional advantage of a multiplier value of your choice.

This is similar to the dp or sp concept in Android.

---

Update:

After a few additional experiences, I have realised that choosing Height as references only works for mobile devices, especially in portrait mode/orientation.

In simple terms when device's main scrolling axis is vertical in device's portrait mode.

So, I would suggest selecting/changing the references as per the need of your application.

i.e. If you are working on an application which is definitely mobile app with only portrait orientation & no rotation support, the above code should work fine without any issues.

However, in case of flutter web support or just rotation support in mobile app, the above approach may not give desired results when user rotates the device.

In this scenario referring to the screen width makes sense for flutter web due to web being accessible to horizontal displays. But in case of rotation support you may choose to stick with width as reference in all orientation or update the reference based on orientation.