할 일 목록: 남은 작업

Coddy Flutter 여정의 프로젝트 섹션에 포함된 레슨. 36개 중 4번째.

화면을 한눈에 보면 해야 할 일이 얼마나 남았는지 알 수 있어야 합니다. 답은 완료되지 않은 작업의 개수이며, 화면을 만들 때마다 목록에서 계산할 수 있습니다.

이를 위한 곳은 게터입니다. 필드처럼 읽히지만 사용할 때마다 코드를 실행하므로 항상 최신 상태입니다.

int get _left => _tasks.where((task) => !task.done).length;

값을 계속 동기화해야 하는 별도의 변수도 필요 없고, 자체적인 setState도 필요하지 않습니다. 작업을 체크하면 이미 setState가 호출되고, 화면이 다시 만들어지며, 게터가 다시 개수를 셉니다.

사람이 쓴 것처럼 보이게 하는 세부 사항이 하나 있습니다. “작업 1개 남음”이라고 해야지 “작업 1개들이 남음”이라고 하면 안 됩니다. 조건에 따라 알맞은 표현을 선택합니다.

챌린지

중급

남은 항목을 표시하세요:

완료되지 않은 작업의 수를 세는 getter _left를 추가하세요
입력 필드와 목록 사이에 Text로 3 tasks left와 같이 표시하고, 양옆에 16픽셀, 위아래에 8픽셀의 패딩을 적용한 Row 안에 배치하세요
작업이 정확히 하나 남았을 때는 1 task left라고 표시하세요

직접 해보기

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

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

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];
  final _controller = TextEditingController();

  void _addTask() {
    setState(() {
      _tasks.add(Task(_controller.text));
    });
    _controller.clear();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      labelText: 'New task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton.filled(
                  onPressed: _addTask,
                  icon: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  leading: Checkbox(
                    value: task.done,
                    onChanged: (value) {
                      setState(() {
                        task.done = value!;
                      });
                    },
                  ),
                  title: Text(
                    task.title,
                    style: task.done
                        ? const TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          )
                        : null,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}