Flutter: SingleChildScrollView, ListView und NestedScrollView…

Scrollverhalten wirkt in Flutter zunächst einfach, doch die falsche Widget-Wahl führt oft zu Performance-Problemen, Overflow-Fehlern und Komplikationen beim verschachtelten Scrollen. In diesem Artikel vergleichen wir SingleChildScrollView, ListView und NestedScrollView praxisnah.

Live-Demo

Sie können die Scroll-Widgets 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 dieser Vergleich wichtig ist

Die Suchintention zu diesem Thema ist ausgeprägt. Nutzer suchen häufig nach direkten Antworten wie „flutter scrollview“, „flutter listview performance“ und „flutter nested scrollview“. Genau deshalb ist ein Vergleichsartikel besonders wertvoll.

Wann Sie SingleChildScrollView verwenden

SingleChildScrollView eignet sich ideal für Screens mit wenigen Kindern, etwa Formulare, Einstellungsseiten oder kurze Inhaltsblöcke.

SingleChildScrollView(
  child: Column(
    children: const [
      SizedBox(height: 16),
      Text('Header'),
      SizedBox(height: 400),
      Text('Footer'),
    ],
  ),
)

Wann Sie ListView verwenden

Nehmen Sie ListView für lange Listen, dynamische Daten und verzögertes Rendern. Es baut nicht alles auf einmal auf, was es bei großen Datenmengen deutlich effizienter macht.

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

Wofür NestedScrollView gedacht ist

NestedScrollView ist nützlich, wenn Sie einen scrollbaren Inhaltsbereich zusammen mit einem abgestimmten Header brauchen – häufig in Verbindung mit SliverAppBar.

NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) => [
    SliverAppBar(
      title: const Text('Profile'),
      pinned: true,
      expandedHeight: 200,
    ),
  ],
  body: ListView.builder(
    itemCount: 30,
    itemBuilder: (context, index) => ListTile(title: Text('Row $index')),
  ),
)

Unterschiede bei der Performance

Der größte Unterschied liegt darin, wie die Widgets ihre Inhalte rendern:

SingleChildScrollView: bewegt alle Kind-Widgets gemeinsam
ListView: priorisiert die sichtbaren Elemente
NestedScrollView: verbindet mehrere Scrollbereiche zu einer Einheit

Für lange Listen ist ListView in der Regel die richtige Antwort – statt alles in eine SingleChildScrollView zu packen.

Häufige Fehler

Eine lange Liste in eine SingleChildScrollView setzen
shrinkWrap: true ohne klaren Grund verwenden
Vergessen, das verschachtelte Scrollverhalten zu testen
Formularfelder unerreichbar lassen, wenn die Tastatur erscheint

Tastatur und Formular-Screens

Auf Formularseiten rettet SingleChildScrollView häufig das Layout. Es sorgt dafür, dass der Screen bedienbar bleibt, wenn die Tastatur eingeblendet wird.

SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      children: const [
        TextField(),
        SizedBox(height: 16),
        TextField(),
      ],
    ),
  ),
)

Wofür sollten Sie sich entscheiden?

Kurze Formulare und Einstellungsseiten: SingleChildScrollView
Lange und dynamische Listen: ListView
Abgestimmte Layouts aus Header und Inhalt: NestedScrollView

Häufig gestellte Fragen

Warum ist SingleChildScrollView für lange Listen ungeeignet?

Weil es versucht, alle Kinder gemeinsam zu rendern, was den Aufwand bei großen Datenmengen erhöht.

Warum sollte ich bei shrinkWrap vorsichtig sein?

Weil shrinkWrap: true die Layout-Arbeit erhöhen kann. Setzen Sie es nur ein, wenn es nötig ist.

Brauche ich immer NestedScrollView?

Nein. Es lohnt sich nur, wenn mehrere Scrollbereiche zusammenspielen müssen.

Zusammenfassung

Die Wahl des richtigen Scroll-Widgets ist eine Frage von Performance und Nutzererfahrung zugleich. Wer die Unterschiede zwischen SingleChildScrollView, ListView und NestedScrollView versteht, schreibt saubereren Flutter-Code und SEO-freundlichere Lerninhalte.

Flutter: SingleChildScrollView, ListView und NestedScrollView im Vergleich