앞부분과 뒷부분

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

ListTile에는 양쪽 끝에 각각 슬롯이 있습니다. leading:은 제목 앞에 배치되며, 보통 아바타나 아이콘이 들어갑니다. trailing:은 행의 맨 끝에 배치되며, 보통 아이콘이나 시간과 같은 짧은 텍스트가 들어갑니다.

ListTile(
  leading: CircleAvatar(child: Text('AL')),
  title: Text('Ada Lovelace'),
  trailing: Icon(Icons.call),
)

타일이 모든 요소를 정렬해 줍니다. leading 위젯은 왼쪽에 놓이고, 제목과 부제목은 가운데를 채우며, trailing 위젯은 오른쪽 끝으로 이동합니다. Row도 SizedBox도 작성할 필요가 없습니다.

챌린지

쉬움

Ada의 행에는 이니셜과 전화 아이콘이 있는 아바타가 있습니다. 나머지 두 행에도 똑같이 추가하세요:

이니셜 AT와 GH가 있는 leading: CircleAvatar
trailing: Icon(Icons.call)

직접 해보기

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(
              leading: CircleAvatar(child: Text('AL')),
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
              trailing: Icon(Icons.call),
            ),
            ListTile(
              title: Text('Alan Turing'),
              subtitle: Text('+1 555 0102'),
            ),
            ListTile(
              title: Text('Grace Hopper'),
              subtitle: Text('+1 555 0103'),
            ),
          ],
        ),
      ),
    );
  }
}