The MediaQuery Widget

If we want to find information about the device our application is running on, we can use MediaQuery. The MediaQuery widget provides information to the subtree starting from its child. We need to provide a MediaQuery widget to the widget tree of our application, but widgets like MaterialApp, WidgetsApp, and CupertinoApp do that for us. Usually, we don’t need to do anything more than ask the MediaQuery for the information that we need.

Actually, the MediaQuery widget does not provide the information directly, but it holds a MediaQueryData widget that has the data. We can request what we need by obtaining an object of type MediaQueryData with MediaQuery.of(context). Next, we accessing the properties provided by this object.

For instance, if we want to know the device’s screen width, we can call MediaQuery.of(context).size.width. Let’s try it in the example below: