할 일 목록: 완료 표시하기

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

작업은 완료 여부를 기억해야 합니다. 클래스에 false로 시작하고 값이 바뀔 수 있는 두 번째 필드를 추가하세요. 따라서 final로 선언하지 않습니다:

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

각 행의 leading: 위젯으로 Checkbox를 사용합니다. value는 작업의 done 값이고, onChanged는 setState 안에서 done을 설정합니다.

완료된 작업은 완료된 것처럼 보여야 합니다. TextDecoration.lineThrough는 텍스트에 취소선을 긋고, 회색은 눈에 덜 띄게 합니다. 작업이 완료되지 않았을 때 스타일은 null이며 텍스트는 테마의 모양을 유지합니다:

style: task.done
    ? const TextStyle(decoration: TextDecoration.lineThrough, color: Colors.grey)
    : null,

챌린지

중급

작업을 완료로 표시하세요:

Task에 bool done = false;를 추가하세요
각 ListTile에 작업의 done 상태를 표시하고 변경하는 Checkbox를 leading:에 지정하세요
작업이 완료되면 제목에 취소선을 긋고 Colors.grey로 표시하세요

직접 해보기

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;
}

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(
                  title: Text(task.title),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}