할 일 목록: 삭제 취소하기

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

스와이프는 빠르고, 실수로 스와이프하는 것도 빠릅니다. 좋은 앱에서는 이를 되돌릴 수 있습니다. 화면 아래쪽에 삭제된 항목을 알려주는 메시지가 표시되고, 옆에는 실행 취소 버튼이 있습니다.

SnackBar에는 action:과 label 및 onPressed가 있는 SnackBarAction이 필요합니다. 작업을 원래 위치로 되돌리려면 제거하기 전에 위치를 기억해 두세요.

final index = _tasks.indexOf(task);
// 해당 항목을 제거한 다음 SnackBar를 표시합니다
SnackBarAction(
  label: 'Undo',
  onPressed: () {
    setState(() {
      _tasks.insert(index, task);
    });
  },
)

작업 두 개를 빠르게 스와이프하면 첫 번째 메시지의 표시 시간이 끝날 때까지 두 번째 메시지가 대기합니다. 최신 메시지가 즉시 표시되도록 showSnackBar를 호출하기 전에 ScaffoldMessenger.of(context).hideCurrentSnackBar();를 호출하세요.

insert(index, task)는 작업을 해당 위치에 되돌려 놓고, 그 뒤에 있는 항목들을 한 칸씩 뒤로 이동시킵니다. add를 사용하면 작업이 맨 끝에 추가됩니다.

onPressed에 전달하는 함수는 나중에 실행되더라도 함수가 만들어진 순간의 index와 task를 기억합니다. 이것이 클로저이며, 콜백은 항상 이를 활용합니다.

챌린지

중급

삭제를 되돌릴 수 있게 하세요. _deleteTask에서:

작업을 제거하기 전에 indexOf로 작업의 위치를 저장하세요
작업을 제거한 후 Deleted와 작업 제목을 표시하는 SnackBar를 보여 주세요. 예: Deleted Walk the dog
작업을 원래 위치로 되돌리는 Undo 동작을 추가하세요
새로운 삭제 메시지가 기존 메시지를 대체하도록 먼저 현재 표시 중인 메시지를 숨기세요

직접 해보기

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

  void _deleteTask(Task task) {
    setState(() {
      _tasks.remove(task);
    });
  }

  @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 Dismissible(
                  key: ObjectKey(task),
                  direction: DismissDirection.endToStart,
                  background: Container(
                    color: Colors.red,
                    alignment: Alignment.centerRight,
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: const Icon(Icons.delete, color: Colors.white),
                  ),
                  onDismissed: (direction) => _deleteTask(task),
                  child: 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,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}