DEV Community

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

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay