Kaydırılan Bir Liste

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 1 / 33.

Bir Column, içindeki her şey kadar uzundur. Bu, ekrandan daha uzun olduğunda alt kısmı kesilir ve Flutter, taşma olan yerde sarı ve siyah çizgiler çizer.

Bir ListView, Column ile aynı children: öğelerini alır, ancak kaydırılabilir. Telefonda yukarı doğru sürükle; listenin geri kalanı görünür.

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

Bir ListView, kendisine verilen alanı doldurur ve her zaman en üstten başlar; bu nedenle mainAxisSize ve mainAxisAlignment özellikleri yoktur.

Görev

Kolay

Uygulama, 20 şehri bir Column içinde listeliyor ve çoğu ekrana sığmıyor: telefonun alt kısmındaki çizgilere bakın. Aşağı kaydırıp son şehir olan Wellington'a ulaşabilmek için Column'u ListView olarak değiştirin.

Kendin dene

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