The MediaQuery Widget
Learn about the device running the application using MediaQuery.
We'll cover the following
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:
Get hands-on with 1400+ tech skills courses.