Breakpoint con LayoutBuilder

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 17 di 30.

Su un tablet, un'app di posta mostra il menu accanto ai messaggi. Su un telefono non c'è spazio, quindi il menu va in alto. La larghezza in cui il layout cambia si chiama punto di interruzione.

LayoutBuilder ti dice quanto spazio ha un widget e ti permette di creare qualcosa di diverso per ogni dimensione:

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

builder è una funzione che Flutter chiama con lo spazio disponibile, in constraints. constraints.maxWidth è la larghezza massima che può avere il risultato. Sotto i 600 pixel restituisci una Column; altrimenti una Row. Su un telefono da 390 pixel vedi la colonna; su un tablet da 1000 pixel, la riga.

MediaQuery legge l'intero schermo. LayoutBuilder legge lo spazio di un singolo widget, quindi funziona anche quando quel widget è un pannello all'interno di una pagina più grande.

Sfida

Medio

Il menu e il contenuto sono sempre affiancati, il che rende tutto angusto su un telefono. Usa un LayoutBuilder con un punto di interruzione a 600 pixel:

meno di 600: il menu sopra il contenuto, in una Column
600 o più: affiancati, in una Row, come ora

Provalo tu

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