Eine scrollbare Liste

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 1 von 33.

Eine Column ist so hoch wie alles, was sich darin befindet. Wenn sie höher als der Bildschirm ist, wird der untere Teil abgeschnitten, und Flutter zeichnet an der Stelle, an der sie überläuft, gelb-schwarze Streifen.

Eine ListView verwendet dieselben children: wie eine Column, lässt sich aber scrollen. Ziehe sie auf dem Smartphone nach oben, damit der Rest der Liste sichtbar wird.

ListView(
  children: [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

Eine ListView füllt den verfügbaren Platz aus und beginnt immer oben. Deshalb hat sie weder mainAxisSize noch mainAxisAlignment.

Aufgabe

Einfach

Die App listet 20 Städte in einer Column auf, und die meisten davon passen nicht auf den Bildschirm: Achte auf die Streifen am unteren Rand des Telefons. Ändere die Column in eine ListView, damit du nach unten bis zu Wellington, der letzten Stadt, scrollen kannst.

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final List<String> cities = [
      'Amsterdam',
      'Bangkok',
      'Cairo',
      'Dublin',
      'Edinburgh',
      'Florence',
      'Geneva',
      'Havana',
      'Istanbul',
      'Jakarta',
      'Kyoto',
      'Lima',
      'Madrid',
      'Nairobi',
      'Oslo',
      'Paris',
      'Quito',
      'Rome',
      'Seoul',
      'Wellington',
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Cities')),
        body: Column(
          children: [
            for (String city in cities)
              Padding(
                padding: const EdgeInsets.all(16),
                child: Text(city, style: const TextStyle(fontSize: 24)),
              ),
          ],
        ),
      ),
    );
  }
}