Tamanho da tela: MediaQuery

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 16 de 30.

Os celulares têm várias larguras. Para dimensionar algo com base na tela, pergunte ao Flutter qual é o tamanho da tela:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 neste celular
final height = size.height; // 844

MediaQuery.of(context) lê informações sobre a tela em que o app é executado. .size corresponde à largura e à altura dela, nos mesmos pixels usados para todos os outros tamanhos que você definir.

O context é aquele que build recebe. Este app mantém sua página em seu próprio widget, HomeScreen, e lê o tamanho no início do seu build, junto à página que o utiliza.

Com a largura em uma variável, os tamanhos passam a ser operações aritméticas: size.width / 2 corresponde à metade da tela em qualquer celular e também em um tablet.

Desafio

Fácil

O banner tem sempre 200 pixels de largura. Faça com que ele tenha metade da largura da tela, qualquer que seja o tamanho da tela.

Experimente você mesmo

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