할 일 목록: 스와이프하여 삭제하기

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

휴대전화에서는 완료한 작업을 밀어서 치웁니다. 각 행을 Dismissible로 감싸면 Flutter가 알아서 밀어 줍니다:

Dismissible(
  key: ObjectKey(task),
  direction: DismissDirection.endToStart,
  background: Container(color: Colors.red, ...),
  onDismissed: (direction) => _deleteTask(task),
  child: ListTile(...),
)

key는 Flutter에 각 행이 무엇인지 알려 주므로 올바른 행이 밀려 나갑니다. ObjectKey(task)는 작업 자체에 연결합니다. endToStart는 왼쪽으로 밀기라는 뜻이고, background는 행이 밀려 나갈 때 그 뒤에 표시되는 것으로, 오른쪽에 삭제 아이콘이 있는 빨간색 배경입니다.

onDismissed는 행이 화면에서 사라졌을 때 실행됩니다. 여기서 할 일은 setState 안에서 작업을 목록에서 제거하는 것입니다. 위치가 아니라 작업 자체를 제거해야 나중에 목록이 바뀌더라도 올바른 작업이 제거됩니다.

챌린지

중급

작업을 밀어서 삭제하세요:

_deleteTask(Task task) 메서드를 추가해 setState 안에서 작업을 제거하세요
각 ListTile을 왼쪽으로 밀 수 있도록 key: ObjectKey(task)가 있는 Dismissible로 감싸세요
background는 빨간색 Container이며, 오른쪽 가장자리에서 24픽셀 떨어진 곳에 흰색 Icons.delete가 있습니다

직접 해보기

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();

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

  void _addTask() {
    final title = _controller.text.trim();
    if (title.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Type a task first')),
      );
      return;
    }
    setState(() {
      _tasks.add(Task(title));
    });
    _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),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              children: [
                Text(
                  _left == 1 ? '1 task left' : '$_left tasks left',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
              ],
            ),
          ),
          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,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}