Basic Guidance MediaQuery You Should Know in Flutter

Hello! I hope you’re having a wonderful day today.

All Flutter developers are familiar with MediaQuery. One of the built-in utility classes in Flutter that help you to access the device’s screen size, orientation, and other media properties. It allows you to access the device’s characteristics and dimensions, helping you create responsive and adaptive user interfaces.

I’m sure the average Flutter beginner will use the Media Query section more to access the height and width of the screen. Of course, there are still many functions of Media Query apart from accessing the height and width of the screen. What are they? Of course, if you know, you won’t be reading this article right ? Okay so if you improve knowledge about MediaQuery in Flutter, make sure you read this article to the end.

Screen Size

I will start from what many people know and are very basic. Yes, access screen size. To access the screen size you can use this

MediaQuery.sizeOf(context)

You can use it to get the size of the screen on your phone. You can also specify the height and width of your screen. Usually this function is used to give the size of a widget to be adjusted to your screen size. For example when you want to have a container that is the same size as the screen size on your phone like this

*sorry the image is too large hehe

Screen Orientation

With MediaQuery you also can access screen orientation in your phone. You can use

MediaQuery.orientationOf(context)

With that you can make adjustments in the view that you create. I will give a simple example. See below

Portrait Mode

Landscape Mode

As you can see i have a view which consists of columns containing text and button. If portrait mode, no problem will occur. But if you change it to landscape you can see there is a bottom overflow on that view. And this is MediaQuery.orientationOf() time to shine. You can use it to solve the problem by adding conditions on the spacing between content in the column.

Look. MediaQuery just saved your life!

Device Pixel Ratio

The third is the device pixel ratio. With media query you can access this by calling this.

MediaQuery.devicePixelRatioOf(context)

With this you can customize widgets such as text or images depending on the device pixel ratio of your cellphone. The higher the resolution of your cellphone, the higher the device pixel ratio. So, this can help you optimize the resolution and avoid blurriness in text or images in Flutter.

Padding and View Inset

You must have typed on your cellphone, right? When you type the keyboard will appear and it will have an effect on changing the inset view of your screen, especially the bottom part, because your screen is covered by the keyboard. That’s view inset. How about padding? You can see the padding here from the notification bar above. There is padding, each phone has a different padding. You can access that with this

// viewinset
MediaQuery.viewInsetsOf(context)
// padding
MediaQuery.paddingOf(context)

You can see an example as below

When you are not typing it will be like this, the bottom view inset will be 0.0

But when you typing, the bottom view inset will change to size height of keyboard which 265.33

Text Scale Factor

Next is the text scale factor. With MediaQuery you can access the text scale factor on your cellphone. You can call this function to access the text scale factor

MediaQuery.textScaleFactorOf(context)

Every phone has a different text scale factor, you can check or change it in your cellphone settings. By accessing this, you can customize the widget as you like to avoid overflow, for example as shown below.

This is the view when i set the text scale factor to 1.0

And this is the view when i set to 1.15

So to fix that overflow you can use text scale factor from MediaQuery and make the conditions depend on the text scale factor like this

Platform Brightness

The last one is the brightness platform or the contrast mode of your phone ( light or dark ). With MediaQuery you can access it and pass the conditions as you want. You can access that with

MediaQuery.platformBrightnessOf(context)

Examples are as below.

When dark mode, text color will be green and change text to “dark”

When light mode, text color will be red and change text to “light”

So those are some basic ways to use MediaQuery to improve your code in Flutter. Actually, there are still a few more MediaQuery, but because I rarely use them, I won’t include them in this article, peace haha. But if you want to discuss other functions, you can comment in the comments below. You can see the detail from my project on Github.

GitHub - alvinaprianto/basic-media-query

See you in the next article and Thank you!!! Byee!