DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on

How Media Query Is Going To Change Your Flutter App.

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.