목록 타일 탭하기

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

목록은 읽기만 하는 것이 아닙니다. 행을 탭해서 선택할 수도 있습니다. ListTile에는 onTap:이 있으며, 행을 탭했을 때 실행되는 함수로, 버튼의 onPressed:와 같은 개념입니다.

ListTile(
  title: Text(fruit),
  onTap: () {
    setState(() {
      picked = fruit;
    });
  },
)

onTap:이 있는 타일을 터치하면 물결 효과도 표시되어 버튼처럼 느껴집니다.

타일이 for로 만들어지면 각 타일의 onTap은 각자의 fruit를 기억합니다. Kiwi를 탭하면 Kiwi의 함수가 실행되고, fruit는 'Kiwi'로 설정됩니다.

챌린지

쉬움

앱 바에는 Pick a fruit가 표시됩니다. 과일 타일을 탭하면 앱 바가 You picked Mango로 바뀌도록 모든 타일에 onTap:을 지정하세요(탭한 과일 이름이 표시되도록 하세요).

직접 해보기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FruitPicker(),
    );
  }
}

class FruitPicker extends StatefulWidget {
  const FruitPicker({super.key});

  @override
  State<FruitPicker> createState() => _FruitPickerState();
}

class _FruitPickerState extends State<FruitPicker> {
  final List<String> fruits = ['Apple', 'Banana', 'Kiwi', 'Mango', 'Peach'];
  String picked = 'Pick a fruit';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(picked)),
      body: ListView(
        children: [
          for (String fruit in fruits)
            ListTile(
              title: Text(fruit),
            ),
        ],
      ),
    );
  }
}