top of page
AutorenbildFlutter Akademie

Wie scrolle ich in meiner Flutter App?



Muss deine Flutter App Scrollen können? Dann bist du hier genau richtig. Es gibt mehrere Arten und Wege, wie man in deiner App scrollen kann. Die wichtigsten 2, lernst du jetzt kennen.


ListView


Wenn du eine Liste an Widgets scrollen willst, ist die ListView eine gute Wahl. Du kannst der ListView entweder eine Liste von Widgets übergeben oder auch die Widgets direkt einfügen. Im folgenden Beispiel siehst du, wie man die ListView verwenden kann.



import 'package:flutter/material.dart';
class ListViewExample extends StatelessWidget {
  const ListViewExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scroll example"),
      ),
      body: ListView(
        children: [
          Container(
            height: 500,
            width: 200,
            color: Colors.red,
          ),
          Container(
            height: 500,
            width: 200,
            color: Colors.green,
          ),
          Container(
            height: 500,
            width: 200,
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

SingleChildScrollView


Die SingleChildScrollView solltest du dann verwenden, wenn du komplexere Layouts verwenden möchtest, da die ListView weniger flexibel ist. Da du wahrscheinlich mehr als ein Widget scrollen möchtest, kannst du einfach in der SingleChildScrollView eine Column beziehungsweise eine Row verwenden. Hier in dem Beispiel habe ich eine Column verwendet. Von dieser aus kannst du so viele Widgets einfügen, wie du möchtest.



import 'package:flutter/material.dart';
class SingleChildScrollViewExample extends StatelessWidget {
  const SingleChildScrollViewExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scroll example"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 500,
              width: 500,
              color: Colors.red,
            ),
            Container(
              height: 500,
              width: 500,
              color: Colors.green,
            ),
            Container(
              height: 500,
              width: 500,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}

Comentarios

Obtuvo 0 de 5 estrellas.
Aún no hay calificaciones

Agrega una calificación
bottom of page