Breakpoints mit LayoutBuilder

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 17 von 30.

Auf einem Tablet zeigt eine Mail-App das Menü neben den Nachrichten an. Auf einem Smartphone ist dafür kein Platz, also wird das Menü oben angezeigt. Die Breite, bei der sich das Layout ändert, nennt man einen Breakpunkt.

LayoutBuilder teilt dir mit, wie viel Platz ein Widget hat, und ermöglicht dir, für jede Größe etwas anderes zu erstellen:

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

builder ist eine Funktion, die Flutter mit dem verfügbaren Platz in constraints aufruft. constraints.maxWidth ist die maximale Breite des Ergebnisses. Bei weniger als 600 Pixeln gibst du eine Column zurück, andernfalls eine Row. Auf einem 390 Pixel breiten Smartphone siehst du die Spalte, auf einem 1000 Pixel breiten Tablet die Zeile.

MediaQuery liest den gesamten Bildschirm aus. LayoutBuilder liest den Platz eines einzelnen Widgets aus und funktioniert daher auch dann, wenn dieses Widget ein Bereich innerhalb einer größeren Seite ist.

Aufgabe

Mittel

Das Menü und der Inhalt stehen immer nebeneinander, was auf einem Smartphone eng ist. Verwende einen LayoutBuilder mit einem Haltepunkt bei 600 Pixeln:

schmaler als 600: das Menü über dem Inhalt, in einer Column
600 oder breiter: nebeneinander, in einer Row, wie jetzt

Probier es selbst

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