Tamaño de pantalla: MediaQuery

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 16 de 30.

Los teléfonos tienen muchos anchos distintos. Para determinar el tamaño de algo en función de la pantalla, pregúntale a Flutter qué tamaño tiene la pantalla:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 en este teléfono
final height = size.height; // 844

MediaQuery.of(context) lee información sobre la pantalla en la que se ejecuta la app. .size indica su ancho y alto, en los mismos píxeles que cualquier otro tamaño que escribas.

context es el que recibe build. Esta app mantiene su página en su propio widget, HomeScreen, y lee el tamaño al inicio de su build, junto a la página que lo usa.

Al tener el ancho en una variable, los tamaños se convierten en operaciones aritméticas: size.width / 2 es la mitad de la pantalla en cualquier teléfono y también en una tableta.

Desafío

Fácil

El banner siempre tiene 200 píxeles de ancho. Haz que tenga la mitad del ancho de la pantalla, sea cual sea el tamaño de esta.

Pruébalo tú mismo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Size')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('This screen is ${size.width.toStringAsFixed(0)} pixels wide'),
            const SizedBox(height: 16),
            Container(
              width: 200,
              height: 80,
              color: Colors.deepOrange,
              child: const Center(
                child: Text('Banner', style: TextStyle(color: Colors.white)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}