DEV Community

loading...
Cover image for How Media Query Is Going To Change Your Flutter App.

How Media Query Is Going To Change Your Flutter App.

Sunit Shirke
Designer | Developer | Flutter & Framer Enthusiast
・2 min read

Media Queries are an indispensable groundwork for responsive design.

Using it in web design has always been a good practice to ensure a reactive rendering of the layout & it's components.
Similarly, it plays a huge role in applications too because writing code & queries for every device's aspect ratio is not very efficient. A good usage of it will result in your release build ending up looking exactly like what you tested during development.
Luckily in Flutter we have MediaQuery that helps us in ensuring the padding & margin stay constant for every device layout. It is a great factor in reducing testing times for medium/big scale apps.

This is all it takes for the responsive magic

horizontal: MediaQuery.of(context).size.width / 15,
vertical: MediaQuery.of(context).size.height / 15

To give you a perspective on the exact difference between an app using MediaQuery and the other not using it I have created 2 simple apps which have 6 containers each one having a different color separated by symmetric Padding Widget which has MediaQuery in both horizontal and vertical values making it dynamic according to each screen. Here are some screenshots:

6.5" screen (Model - Samsung Galaxy A51)

  • Without MediaQuery

Galaxy A51

  • Using MediaQuery

Galaxy A51

5.0" screen (Model - Motorola Moto G [3rd Gen])

  • Without MediaQuery

Galaxy A51

  • Using MediaQuery

Galaxy A51

Note that the screenshots containing MediaQuery look exactly the same even after a huge difference in screen sizes.

Thank you for reading!

Thank you

Full code

Discussion (0)