Image credit: Hiten Rajgor on Dribbble

Flutter — Responsive Design : MediaQuery

I just love flutter because it allows us to target multiple different platforms with a single code base. As a developer, we always question ourselves about how to deal with different screen sizes?

So today we are going to see Media Query which allows us to retrieve some important details about the device we’re currently running on like the screen dimensions aspect ratio and the orientation of the screen.

in the above code, variable deviceInfo holds MediaQuery.of(context) which gives us all information about the device like size(height, width), aspect ratio, text scale factor, platform brightness, time format, and many more

Now along with only height and width, MediaQuery gives much different information related to the device on which the app is running

You can play around with different device information as per your app requirement and make your application responsive to the device.

You can find the source code here

Thank You!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yogita Kumar

Google Developer Expert Flutter| Cloud Enthusiast | Full Stack Developer | .NET Developer |Coach and Trainer