스크롤되는 목록

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 1번째.

Column은 안에 있는 모든 요소를 합친 높이만큼 높아집니다. 화면보다 높아지면 아래쪽이 잘리고, Flutter는 넘친 부분에 노란색과 검은색 줄무늬를 그립니다.

ListView는 Column과 동일한 children:을 사용하지만 스크롤할 수 있습니다. 휴대폰에서 위로 끌어 올리면 나머지 목록이 나타납니다.

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

ListView는 주어진 공간을 채우고 항상 맨 위에서 시작하므로 mainAxisSize도 mainAxisAlignment도 없습니다.

챌린지

쉬움

앱은 Column에 도시 20개를 나열하지만, 대부분 화면에 표시되지 않습니다. 휴대전화 화면 아래쪽의 줄무늬를 확인하세요. 아래로 스크롤하여 마지막 도시인 Wellington까지 볼 수 있도록 Column을 ListView로 바꾸세요.

직접 해보기

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