Une liste qui défile

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 1 sur 33.

Une Column est aussi haute que tout ce qu’elle contient. Si cette hauteur dépasse celle de l’écran, le bas est coupé et Flutter peint des bandes jaunes et noires à l’endroit du débordement.

Une ListView prend les mêmes children: qu’une Column, mais elle défile. Faites-la glisser vers le haut sur le téléphone pour faire apparaître le reste de la liste.

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

Une ListView occupe tout l’espace qui lui est attribué et commence toujours en haut ; elle n’a donc ni mainAxisSize ni mainAxisAlignment.

Défi

Facile

L’application répertorie 20 villes dans une Column, et la plupart ne tiennent pas à l’écran : regarde les bandes en bas du téléphone. Remplace la Column par une ListView pour pouvoir faire défiler la liste jusqu’à Wellington, la dernière ville.

Essayez vous-même

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)),
              ),
          ],
        ),
      ),
    );
  }
}