목록 타일

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

목록의 대부분 행은 비슷하게 생겼습니다. 기본 줄이 하나 있고, 그 아래에 작은 줄이 있을 때도 있으며, 양 끝에는 아이콘이 있을 수도 있습니다. ListTile은 적절한 크기와 패딩이 미리 설정된 행입니다.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

title은 기본 줄입니다. subtitle은 그 아래에 더 작은 크기와 옅은 색으로 표시됩니다. 둘 다 위젯을 받으며, 보통 Text를 사용합니다.

ListTile은 목록과 너비가 같고, 부제목이 있으면 두 줄에 맞게 높이가 늘어납니다. 여러 개를 ListView에 넣으면 연락처 목록이 됩니다.

챌린지

쉬움

Ada의 행은 이미 ListTile입니다. 나머지 두 텍스트도 Ada의 항목처럼 타일로 바꾸세요:

부제목이 +1 555 0102인 Alan Turing
부제목이 +1 555 0103인 Grace Hopper

직접 해보기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}