Flutter: Responsives Breakpoint-Design mit LayoutBuilder

Responsives Design bedeutet längst nicht mehr nur, kleine Handybildschirme zu bedienen. Flutter-Apps zielen inzwischen auch auf Web und Desktop, wodurch breakpointbasierte Layouts noch wichtiger werden. In diesem Artikel bauen wir mit LayoutBuilder und sauberen, geräteorientierten Breakpoints eine responsive Struktur.

Live-Demo

Sie können den responsiven LayoutBuilder-Ansatz im interaktiven Beispiel unten ausprobieren:

💡 Falls sich das Beispiel nicht öffnet, klicken Sie auf den Link DartPad, um es in einem neuen Tab auszuführen.

Warum Breakpoints wichtig sind

Feste Größen führen auf kleinen Bildschirmen zu Overflow und auf großen zu verschenktem Platz. Mit Breakpoints wählen Sie für jede Geräteklasse das passende Layout.

Häufig wird nach Begriffen wie „flutter layoutbuilder responsive“, „flutter breakpoint“ und „responsive web flutter“ gesucht – die Suchintention zu diesem Thema ist also stark.

Was LayoutBuilder Ihnen liefert

LayoutBuilder stellt die Vorgaben des übergeordneten Widgets bereit. Sie können das Layout also anhand der tatsächlich verfügbaren Breite umschalten, statt das Gerät zu erraten.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return const MobileLayout();
    } else if (constraints.maxWidth < 1024) {
      return const TabletLayout();
    } else {
      return const DesktopLayout();
    }
  },
)

Eine praxistaugliche Breakpoint-Strategie

Ein einfacher Ausgangspunkt:

• 0–599 px: Mobil
• 600–1023 px: Tablet
• Ab 1024 px: Desktop/Web

Diese Werte sind keine allgemeingültigen Regeln, aber für viele Projekte eine solide Grundlage.

Beispiel für ein echtes responsives Layout

class ResponsiveHome extends StatelessWidget {
  const ResponsiveHome({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return _MobileHome();
        }

        if (constraints.maxWidth < 1024) {
          return _TabletHome();
        }

        return _DesktopHome();
      },
    );
  }
}

Was sollte sich auf Mobilgeräten ändern?

Mobile Layouts funktionieren meist am besten als eine einzige vertikale Spalte. Die Navigation sollte einfach bleiben und der Inhalt einem klaren vertikalen Fluss folgen.

Column(
  children: const [
    SizedBox(height: 16),
    Text('Mobile Layout'),
  ],
)

Was sollte sich auf Tablets ändern?

Tabletbildschirme eignen sich ideal für zweispaltige Strukturen. Liste plus Detail, Seitenmenü plus Inhalt oder Kartenraster wirken hier oft deutlich natürlicher.

Row(
  children: [
    SizedBox(width: 240, child: SideMenu()),
    Expanded(child: TabletContent()),
  ],
)

Best Practice für Desktop und Web

Auf dem Desktop sollte der Inhalt in der Regel zentriert und auf eine gut lesbare Maximalbreite begrenzt sein. Große Bildschirme brauchen einen bewussten Umgang mit Weißraum.

Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(maxWidth: 1200),
    child: Row(
      children: const [
        Expanded(flex: 2, child: ContentArea()),
        SizedBox(width: 24),
        Expanded(child: Sidebar()),
      ],
    ),
  ),
)

MediaQuery im Vergleich zu LayoutBuilder

MediaQuery liefert die Informationen zum gesamten Bildschirm. LayoutBuilder liefert die Vorgaben des aktuellen übergeordneten Widgets.

Dieser Unterschied zählt, wenn ein Widget nicht bildschirmfüllend ist und auf seinen Container statt auf das gesamte Gerät reagieren soll.

Häufige Fehler

• Ein einziges Layout für jede Bildschirmgröße verwenden
• Beliebige Breakpoint-Werte wählen statt gestalterisch begründeter
• Inhalte auf breiten Bildschirmen zu weit auseinanderziehen
• Nur MediaQuery nutzen und die Vorgaben des Elternteils ignorieren

Warum dieses Thema SEO-freundlich ist

Responsives Design hängt eng mit Flutter Web, Desktop-Layouts und modernen UI-Systemen zusammen. Ein Beitrag, der die Breakpoint-Strategie mit klaren Beispielen erklärt, trifft viele unterschiedliche Suchintentionen.

Häufig gestellte Fragen

Sollte ich LayoutBuilder oder MediaQuery verwenden?

Nehmen Sie LayoutBuilder, wenn das Layout vom übergeordneten Container abhängt. Nehmen Sie MediaQuery, wenn Sie geräteweite Informationen brauchen.

Ist responsives Design auch für Desktop-Apps nötig?

Ja. Desktop-Fenster lassen sich in der Größe ändern, die Oberfläche muss sich also sauber anpassen.

Kann ich in einer App mehrere Breakpoints verwenden?

Auf jeden Fall. Größere Apps brauchen oft mehr als drei Layout-Zustände.

Zusammenfassung

LayoutBuilder ist eines der saubersten Werkzeuge für responsives Breakpoint-Design in Flutter. Indem Sie Layouts für Mobil, Tablet und Desktop/Web trennen, verbessern Sie Nutzererfahrung, Lesbarkeit und den SEO-Wert des Artikels.