# MediaQuery.of(context) V.S Orientation/Layout Builder
###### tags: `Flutter`
[TOC]

# Introduction
Both can be used to deal situations when phone orientations change, such as UI display. The main difference between them is:
> **MediaQuery.of** is used for the whole app.
> **Orientation/Layout Builder** if used to specify one widget modification.[color=orange]

# MediaQuery.of(context)

**Ref:** [MediaQuery class](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html)

## Where is it used?
Mostly in Stateless Widget **build** overrided function, because you can get BuildContext from there.

## How to use it?
Let's see the example below:

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context){ 
      double screenWidth = MediaQuery.of(context).size.width;
      double screenHeight = MediaQuery.of(context).size.height;
      returnScaffold( 
        // Some widget here
        ),
        body: Center(
          child: Container(
            width: screenWidth *0.7, 
            height: screenHeight *0.5, 
            color: Colors.deepOrangeAccent,
          ),
        ),
      );
    }
}

By using it in the overrided build function in StatelessWidget, we can access to various type of information, such as:

>1. deviceInfo.size (Size).
>1. devicePixelRatio (double)
>1. orientation (Orientation)
>1. textScaleFactor (double)
>1. platformBrightness (Brightness)
>1. alwaysUse24HourFormat (bool)
>1. disableAnimations (bool)[color=#326bc7]

**Here we have another example which uses orientation:**

 body: MediaQuery.of(context).orientation == Orientation.landscape
    ?
    // Landscape
    const Text(
      'Your phone is on landscape mode',
      style: TextStyle(fontSize: 30, color: Colors.purple),
    )
    :
    // Portrait
    const Text(
      'Your phone is on portrait mode',
      style: TextStyle(fontSize: 18, color: Colors.red),
    ),
);

## Orientation/Layout Builder
### OrientationBuilder
**Ref:** [OrientationBuilder class](https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html)

#### How to use it?

body: OrientationBuilder(
  builder: (context, orientation){
    if(orientation == Orientation.portrait){
      return portraitMode();
    }else{
      return landscapeMode();
    }
  },
),

### LayoutBuilder

**Ref:** [LayoutBuilder class](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html)

Let's see example below:
>Here we just implement the LayoutBuilder to see that parameters, it provides us. As we can see below, we are provided **constraints**. This one can provide us: **maxWidth**, **maxHeight**, **minWidth**, **minHeight**.
>[color=#326bc7]

#### How to implement it in UI change?

Output: https://www.kindacode.com/wp-content/uploads/2020/10/Flutter-LayoutBuilder.mp4

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(builder: (context, constraints) {
      // Large screens (tablet on landscape mode, desktop, TV)
      if (constraints.maxWidth > 600) {
        return Row(
          children: [
            Column(
              children: [
                Container(
                  height: 100,
                  width: constraints.maxWidth * 0.75,
                  color: Colors.blueAccent,
                  child: Center(
                    child: Text('Header'),
                  ),
                ),
                Container(
                  height: 300,
                  width: constraints.maxWidth * 0.75,
                  color: Colors.amber,
                  child: Center(
                    child: Text('Main Content'),
                  ),
                ),
                Container(
                  height: constraints.maxHeight - 400,
                  width: constraints.maxWidth * 0.75,
                  color: Colors.lightGreen,
                  child: Center(
                    child: Text('Footer'),
                  ),
                ),
              ],
            ),
            Container(
              width: constraints.maxWidth * 0.25,
              height: constraints.maxHeight,
              color: Colors.pink,
              child: Center(
                child: Text('Right Sidebar'),
              ),
            ),
          ],
        );
      }

      // Samll screens
      return Column(
        children: [
          Container(
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text('Header'),
            ),
          ),
          Container(
            height: 300,
            color: Colors.amber,
            child: Center(
              child: Text('Main Content'),
            ),
          ),
          Container(
            height: constraints.maxHeight - 400,
            color: Colors.lightGreen,
            child: Center(
              child: Text('Footer'),
            ),
          )
        ],
      );
    }));
  }
}

## Other Reference
[Medium - Screen Orientation](https://medium.flutterdevs.com/screen-orientation-in-flutter-96526f2c1e7f)