Pontos de quebra com LayoutBuilder

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

Em um tablet, um aplicativo de e-mail mostra o menu ao lado das mensagens. Em um celular, não há espaço, então o menu fica na parte superior. A largura em que o layout muda é chamada de ponto de interrupção.

LayoutBuilder informa quanto espaço um widget tem e permite criar algo diferente para cada tamanho:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // celular
    }
    return Row(children: [menu, content]); // tablet
  },
)

builder é uma função que o Flutter chama com o espaço disponível, em constraints. constraints.maxWidth é a largura máxima permitida para o resultado. Abaixo de 600 pixels, você retorna uma Column; caso contrário, uma Row. Em um celular com 390 pixels, você vê a coluna; em um tablet com 1000 pixels, a linha.

MediaQuery lê a tela inteira. LayoutBuilder lê o espaço de um widget, então continua funcionando quando esse widget é um painel dentro de uma página maior.

Desafio

Médio

O menu e o conteúdo ficam sempre lado a lado, o que deixa pouco espaço em um celular. Use um LayoutBuilder com um ponto de quebra em 600 pixels:

menos de 600: o menu acima do conteúdo, em uma Column
600 ou mais: lado a lado, em uma Row, como agora

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}