Daftar yang Bisa Digulir

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 1 dari 33.

Column memiliki tinggi sebesar gabungan tinggi semua isinya. Jika tingginya melebihi layar, bagian bawahnya terpotong, dan Flutter menggambar garis-garis kuning dan hitam di bagian yang meluap.

ListView menggunakan children: yang sama seperti Column, tetapi bisa digulir. Seret ke atas di ponsel, lalu sisa daftar akan terlihat.

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

ListView mengisi ruang yang diberikan kepadanya dan selalu dimulai dari atas, jadi ListView tidak memiliki mainAxisSize maupun mainAxisAlignment.

Tantangan

Mudah

Aplikasi ini menampilkan 20 kota dalam Column, dan sebagian besar tidak muat: lihat garis-garis di bagian bawah ponsel. Ubah Column menjadi ListView agar kamu bisa menggulir ke bawah sampai Wellington, kota terakhir.

Coba sendiri

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