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