Flutter: gestión del objeto MediaQuery

Durante el proceso de desarrollo de una aplicación para teléfonos y tabletas, es una práctica estándar tener diferentes diseños de interfaz de usuario para diferentes tamaños de pantalla para una mejor experiencia de usuario. Si el usuario tiene una preferencia establecida para diferentes tamaños de fuente o desea reducir las animaciones. Aquí es donde entra en acción MediaQuery, puede obtener información sobre el tamaño actual del dispositivo, así como las preferencias del usuario, y diseñar su diseño en consecuencia. MediaQuery proporciona una vista de nivel superior del tamaño de pantalla de la aplicación actual y también puede brindar información más detallada sobre el dispositivo y sus preferencias de diseño. En la práctica, MediaQuery siempre está ahí. Simplemente se puede acceder llamando a MediaQuery.of en el método de compilación. 

Desde allí, puede buscar todo tipo de información interesante sobre el dispositivo en el que se está ejecutando, como el tamaño de la pantalla, y crear su diseño en consecuencia. MediaQuery también se puede usar para verificar la orientación del dispositivo actual o se puede usar para verificar si el usuario ha modificado el tamaño de fuente predeterminado. También se puede usar para determinar si partes de la pantalla están ocultas por una interfaz de usuario del sistema, similar a un widget de área segura. 

Ejemplo:

El uso de mediaQuery.of hace que los widgets se reconstruyan automáticamente de acuerdo con los tamaños actuales del dispositivo y las preferencias de diseño cada vez que cambian.

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
      ),
    );
  }
}

Producción:

Ejemplo 2: Obtención de la orientación del dispositivo y reconstrucción en consecuencia.

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,
      ),
    );
  }
}

Producción:

Nota: puede cambiar la orientación colocando este código antes de runApp() en su archivo main.dart

void main() {
    WidgetsFlutterBinding.ensureInitialized();
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    runApp(MyHomePage());
}