Image credit: Hiten Rajgor on Dribbble

Flutter — Responsive Design : MediaQuery

Yogita Kumar

--

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!

--

--

Yogita Kumar

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