Flutter: SingleChildScrollView und ScrollView verwenden

Die Bildschirmgröße mobiler Geräte ist begrenzt, und Inhalte passen oft nicht auf eine einzige Ansicht. In solchen Fällen muss der Inhalt scrollbar werden. Der einfachste Weg dazu ist in Flutter das Widget SingleChildScrollView.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

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

Was ist SingleChildScrollView?

Es ist ein Kasten, der ein einzelnes Widget (meist eine Column) scrollbar macht.

Grundlegende Verwendung

SingleChildScrollView(
  child: Column(
    children: [
      Container(height: 200, color: Colors.red),
      Container(height: 200, color: Colors.green),
      Container(height: 200, color: Colors.blue),
      Container(height: 200, color: Colors.yellow),
      // More content exceeding screen size...
    ],
  ),
)

Wenn Sie SingleChildScrollView nicht verwenden und der Inhalt über den Bildschirm hinausgeht, erhalten Sie den bekannten Overflow-Fehler mit den „gelb-schwarzen Streifen“.

Horizontales Scrollen

Sie können nicht nur vertikal, sondern auch horizontal scrollen.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(width: 150, color: Colors.red),
      Container(width: 150, color: Colors.green),
      Container(width: 150, color: Colors.blue),
    ],
  ),
)

SingleChildScrollView im Vergleich zu ListView

Ein häufiger Fehler ist, für lange Listen eine Column in einer SingleChildScrollView zu verwenden. Das ist nicht performant, weil alle Elemente auf einmal gerendert werden (auch die, die gar nicht sichtbar sind).

• SingleChildScrollView: Für eine überschaubare Anzahl konkreter Elemente (z. B. eine Formularseite oder ein Einstellungs-Screen).
• ListView: Für große Mengen oder dynamische Listendaten. Es rendert nur das, was auf dem Bildschirm sichtbar ist (Lazy Loading).

Beispiel für ListView:

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

Scroll Physics

Sie können das Scrollverhalten ändern.

• BouncingScrollPhysics: Federnder Effekt im iOS-Stil.
• ClampingScrollPhysics: Am Ende stoppender Effekt im Android-Stil (blaues Leuchten).

SingleChildScrollView(
  physics: BouncingScrollPhysics(),
  child: Column(...)
)

Tastaturproblem und ScrollView

Bei Formularfeldern (TextField) ist SingleChildScrollView entscheidend, damit der Bildschirm beim Einblenden der Tastatur nicht gestaucht wird. Meist umschließt es den gesamten Inhalt, sodass Nutzer bei geöffneter Tastatur nach oben scrollen und die darüberliegenden Felder erreichen können.

Zusammenfassung

• Verwenden Sie SingleChildScrollView, wenn Ihr Inhalt nicht auf den Bildschirm passt.
• Sie können die gewünschte Scrollrichtung festlegen (scrollDirection).
• Wenn Sie Hunderte gleichartiger Elemente (eine Liste) anzeigen, nehmen Sie ListView.
• Für Formular-Screens ist SingleChildScrollView ideal.