Flutter: Bildschirmabhängiges Design mit LayoutBuilder

Flutter LayoutBuilder – responsives Design

Flutter läuft zwar auf iOS und Android, ist aber nicht von Haus aus dynamisch. Um sich an unterschiedliche Bildschirmgrößen anzupassen, müssen wir mit Werkzeugen wie LayoutBuilder responsive Layouts bauen.

Warum ist Unterstützung mehrerer Bildschirme wichtig?

Flutter-Anwendungen können auf diesen Geräten laufen:

• Smartphones mit kleinem Bildschirm (iPhone SE)
• Smartphones mit großem Bildschirm (iPhone Pro Max)
• Tablets (iPad)
• Desktop-Computer
• Webbrowser

Wenn Sie auf jeder Bildschirmgröße dieselben festen Werte verwenden, kann Ihr Layout auf manchen Geräten zerfallen.

Live-Demo: responsives Design mit LayoutBuilder

Probieren Sie die Beispiele zum responsiven Design mit LayoutBuilder aus, indem Sie den Bereich an der senkrechten Linie aufziehen:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Was ist LayoutBuilder?

LayoutBuilder ist ein Widget, das die Größenvorgaben des übergeordneten Widgets liefert. Mit diesen Informationen können Sie je nach Bildschirmgröße unterschiedliche Layouts bauen.

Grundlegende Verwendung

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return Container(
      width: constraints.maxWidth,
      height: constraints.maxHeight,
      child: Text('Current width: ${constraints.maxWidth}'),
    );
  },
)

Eigenschaften von BoxConstraints

• maxWidth: Aktuelle maximale Breite
• maxHeight: Aktuelle maximale Höhe
• minWidth: Minimale Breite
• minHeight: Minimale Höhe

Methode 1: Ein Layout je Bildschirmgröße

Sie können anhand der Bildschirmgröße unterschiedliche Layouts anzeigen.

Breakpoints festlegen

class ScreenSize {
  static bool isSmall(double width) => width < 600;
  static bool isMedium(double width) => width >= 600 && width < 900;
  static bool isLarge(double width) => width >= 900;
}

Beispiel für ein responsives Widget

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          // Small screen (Mobile)
          return _buildMobileLayout();
        } else if (constraints.maxWidth < 900) {
          // Medium screen (Tablet)
          return _buildTabletLayout();
        } else {
          // Large screen (Desktop)
          return _buildDesktopLayout();
        }
      },
    );
  }

  Widget _buildMobileLayout() {
    return Column(
      children: [
        AppBar(title: Text('Mobile View')),
        Expanded(
          child: ListView(
            children: [
              _buildCard('Item 1'),
              _buildCard('Item 2'),
              _buildCard('Item 3'),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildTabletLayout() {
    return Row(
      children: [
        // Side panel
        Container(
          width: 200,
          color: Colors.grey[200],
          child: ListView(
            children: [
              ListTile(title: Text('Menu 1')),
              ListTile(title: Text('Menu 2')),
            ],
          ),
        ),
        // Main content
        Expanded(
          child: Column(
            children: [
              AppBar(title: Text('Tablet View')),
              Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  children: [
                    _buildCard('Item 1'),
                    _buildCard('Item 2'),
                    _buildCard('Item 3'),
                    _buildCard('Item 4'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildCard(String title) {
    return Card(
      margin: EdgeInsets.all(8),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Center(child: Text(title)),
      ),
    );
  }
}

Zusammenfassung

Responsives Design mit LayoutBuilder:

1. Bildschirmgröße erkennen: constraints.maxWidth und constraints.maxHeight
2. Mit Breakpoints gestalten: Mobil, Tablet, Desktop
3. Anteilige Größen: Prozentwerte verwenden
4. Bilder in unterschiedlichen Auflösungen: Performance-Optimierung
5. Dynamisches Layout: Spaltenzahl, Abstände, Schriftgröße

Best Practices:

• Verwenden Sie übliche Breakpoints (600 px, 900 px)
• Bevorzugen Sie anteilige Werte
• Testen Sie auf jedem Gerät
• Achten Sie auf die Performance

LayoutBuilder ist die Grundlage für professionelle Flutter-Anwendungen, die auf jedem Gerät perfekt aussehen!