Puntos de ruptura con LayoutBuilder

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

En una tableta, una aplicación de correo muestra el menú junto a los mensajes. En un teléfono no hay espacio, así que el menú aparece arriba. El ancho en el que cambia el diseño se llama punto de quiebre.

LayoutBuilder te indica cuánto espacio tiene un widget y te permite crear algo diferente para cada tamaño:

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

builder es una función a la que Flutter llama con el espacio que tiene, en constraints. constraints.maxWidth es el ancho máximo que puede tener el resultado. Si es menos de 600 píxeles, devuelves una Column; de lo contrario, una Row. En un teléfono de 390 píxeles ves la columna; en una tableta de 1000 píxeles, la fila.

MediaQuery lee toda la pantalla. LayoutBuilder lee el espacio de un solo widget, así que sigue funcionando cuando ese widget es un panel dentro de una página más grande.

Desafío

Intermedio

El menú y el contenido siempre están uno al lado del otro, lo que resulta estrecho en un teléfono. Usa un LayoutBuilder con un punto de interrupción en 600 píxeles:

menos de 600: el menú encima del contenido, en una Column
600 o más: uno al lado del otro, en una Row, como ahora

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