Flutter - Managing the MediaQuery Object - GeeksforGeeks

15 Dec, 2021
During the process of developing an app for both phones and tablets, it is standard practice to have different UI layouts for different screen sizes for a better user experience. If the user has a preference set for different font sizes or wants to curtail animations. This is where MediaQuery comes into action, you can get information about the current device size, as well as user preferences, and design your layout accordingly. MediaQuery provides a higher-level view of the current app’s screen size and can also give more detailed information about the device and its layout preferences. In practice, MediaQuery is always there. It can simply be accessed by calling MediaQuery.of in the build method. 
From there you can look up all sorts of interesting information about the device you’re running on, like the size of the screen, and build your layout accordingly. MediaQuery can also be used to check the current device’s orientation or can be used to check if the user has modified the default font size. It can also be used to determine if parts of the screen are obscured by a system UI, similar to a safe area widget. 
Example:
Using mediaQuery.of automatically causes the widgets to rebuild themselves according to the current device sizes and layout preferences every time they change.
Dart
class Home extends StatelessWidget {var size,height,width;   @override  Widget build(BuildContext context) {         // getting the size of the window    size = MediaQuery.of(context).size;    height = size.height;    width = size.width;     return Scaffold(      appBar: AppBar(        title: Text("Geeks For Geeks"),        backgroundColor: Colors.green,      ),      body: Container(        color: Colors.yellow,        height: height/2,//half of the height size        width: width/2,//half of the width size      ),    );  }}
Output:
Example 2: Getting device orientation and rebuilding accordingly.
Dart
class Home extends StatelessWidget {var orientation, size,height,width;        @override  Widget build(BuildContext context) {         // getting the orientation of the app    orientation = MediaQuery.of(context).orientation;         //size of the window    size = MediaQuery.of(context).size;    height = size.height;    width = size.width;     return Scaffold(      appBar: AppBar(        title: Text("Geeks For Geeks"),        backgroundColor: Colors.green,      ),       // checking the orientation      body: orientation == Orientation.portrait?Container(        color: Colors.blue,        height: height/4,        width: width/4,      ):Container(        height: height/3,        width: width/3,        color: Colors.red,      ),    );  }}
Output:
Note: You can change the orientation by putting these code before the runApp() in your main.dart file
Dart
void main() {    WidgetsFlutterBinding.ensureInitialized();    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);    runApp(MyHomePage());}
  
sooda367
sumitgumber28
Flutter UI-components
Picked
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
What is widgets in Flutter?
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - BorderRadius Widget