Punkty zmiany układu w LayoutBuilder

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 17 z 30.

Na tablecie aplikacja pocztowa wyświetla menu obok wiadomości. Na telefonie nie ma na to miejsca, więc menu pojawia się u góry. Szerokość, przy której zmienia się układ, nazywa się punktem przerwania.

LayoutBuilder informuje, ile miejsca ma widżet, i pozwala tworzyć różne układy dla poszczególnych rozmiarów:

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

builder to funkcja, którą Flutter wywołuje, przekazując jej dostępną przestrzeń w constraints. constraints.maxWidth określa maksymalną szerokość wyniku. Przy szerokości poniżej 600 pikseli zwracasz Column; w przeciwnym razie Row. Na telefonie o szerokości 390 pikseli widzisz kolumnę, a na tablecie o szerokości 1000 pikseli — wiersz.

MediaQuery odczytuje wymiary całego ekranu. LayoutBuilder odczytuje przestrzeń dostępną dla pojedynczego widżetu, więc działa także wtedy, gdy ten widżet jest panelem na większej stronie.

Wyzwanie

Średni

Menu i zawartość zawsze znajdują się obok siebie, co na telefonie jest niewygodne. Użyj LayoutBuilder z punktem przełamania na poziomie 600 pikseli:

mniej niż 600: menu nad zawartością, w Column
600 lub więcej: obok siebie, w Row, tak jak teraz

Spróbuj swoich sił

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