How Media Query Is Going To Change Your Flutter App.

#flutter #design #application #responsive

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: