Flutter: How to scale text based on screen size - flutter

Question

I have an app I'm building and I recently made the screens I have so far scale automatically based on screen size so that they can fit multiple devices and so that I can test them on my device (iPhone 7 Plus). I did that and it worked fine but then I wanted to test it on a smaller screen and see how it goes, on the iPhone 6s emulator the app had render flex overflows, after changing any sized boxes i had to set their size based on their (original size / size of container on iPhone 12 Pro Max) * current container size and it barely worked (i was building the app on the iPhone 12 Pro Max emulator). Any smaller screen sizes won't work and that is because the elements them selves don't scale because the text size is too big (e.g. text form fields and buttons don't scale down because text size remains the same).
I saw this (Flutter: How can I resize text based on device's screen size) and was going to try it as a potential solution as that is how I rescaled the containers on the Welcome/Authentication screens but wanted to see if there was an eaiser or built in solution that Flutter has that would be easier to implement.
iPhone 12 Pro Max:
Welcome/Authentication Screens: https://cln.sh/asdQyc
Settings Screen: https://cln.sh/yQSM5o
iPhone 6s:
Welcome/Authentication Screens: https://cln.sh/mZZZ2F
Settings Screen: https://cln.sh/oUss9m
Thanks for the help!
Edit: Also using the solution in Flutter: How can I resize text based on device's screen size makes the text too small but I can't make it bigger because then it would be too big on bigger screens.

Answer 1

You can use an if-else condition too. It worked for me when I was very specific about size of text. I used both height and width to calculate my text size, like -
if(height<A && width<B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
if(height>A && width<B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
if(height<A && width>B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
if(height>A && width>B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
I was using android, so it was a bit longer, but i-phones have very less range of varieties in sizes, so 4-5 statements would be more-than enough.
Or, if you wish to go even further, make a linear or logarithmic function by using appropriate values of size, height and width