Flutter 튜토리얼 30편: CRUD 작업 구현

1
class Todo {
2
  final int? id;          // 생성 전에는 null
3
  final String title;
4
  final bool completed;
5

6
  const Todo({
7
    this.id,
8
    required this.title,
9
    this.completed = false,
10
  });
11

12
  // JSON → Todo
13
  factory Todo.fromJson(Map<String, dynamic> json) {
14
    return Todo(
15
      id: json['id'] as int?,
16
      title: json['title'] as String,
17
      completed: json['completed'] as bool? ?? false,
18
    );
19
  }
20

21
  // Todo → JSON
22
  Map<String, dynamic> toJson() {
23
    return {
24
      if (id != null) 'id': id,
25
      'title': title,
26
      'completed': completed,
27
    };
28
  }
29

30
  // 불변 객체 복사 (수정용)
31
  Todo copyWith({
32
    int? id,
33
    String? title,
34
    bool? completed,
35
  }) {
36
    return Todo(
37
      id: id ?? this.id,
38
      title: title ?? this.title,
39
      completed: completed ?? this.completed,
40
    );
41
  }
42
}

1
class TodoListScreen extends StatefulWidget {
2
  @override
3
  _TodoListScreenState createState() => _TodoListScreenState();
4
}
5

6
class _TodoListScreenState extends State<TodoListScreen> {
7
  final TodoApi _api = TodoApi();
8

9
  List<Todo> _todos = [];
10
  bool _isLoading = true;
11
  String? _error;
12

13
  @override
14
  void initState() {
15
    super.initState();
16
    _loadTodos();
17
  }
18

19
  Future<void> _loadTodos() async {
20
    setState(() {
21
      _isLoading = true;
22
      _error = null;
23
    });
24

25
    try {
26
      final todos = await _api.fetchTodos();
27
      setState(() {
28
        _todos = todos;
29
        _isLoading = false;
30
      });
31
    } catch (e) {
32
      setState(() {
33
        _error = e.toString();
34
        _isLoading = false;
35
      });
36
    }
37
  }
38

39
  @override
40
  Widget build(BuildContext context) {
41
    return Scaffold(
42
      appBar: AppBar(title: Text('할 일 목록')),
43
      body: _buildBody(),
44
    );
45
  }
46

47
  Widget _buildBody() {
48
    if (_isLoading) {
49
      return Center(child: CircularProgressIndicator());
50
    }
51

52
    if (_error != null) {
53
      return Center(
54
        child: Column(
55
          mainAxisAlignment: MainAxisAlignment.center,
56
          children: [
57
            Text(_error!),
58
            ElevatedButton(
59
              onPressed: _loadTodos,
60
              child: Text('다시 시도'),
61
            ),
62
          ],
63
        ),
64
      );
65
    }
66

67
    return RefreshIndicator(
68
      onRefresh: _loadTodos,
69
      child: ListView.builder(
70
        itemCount: _todos.length,
71
        itemBuilder: (context, index) {
72
          return TodoTile(todo: _todos[index]);
73
        },
74
      ),
75
    );
76
  }
77
}

1
Future<void> _addTodo() async {
2
  final controller = TextEditingController();
3

4
  final title = await showDialog<String>(
5
    context: context,
6
    builder: (context) => AlertDialog(
7
      title: Text('새 할 일'),
8
      content: TextField(
9
        controller: controller,
10
        decoration: InputDecoration(
11
          hintText: '할 일을 입력하세요',
12
        ),
13
        autofocus: true,
14
      ),
15
      actions: [
16
        TextButton(
17
          onPressed: () => Navigator.pop(context),
18
          child: Text('취소'),
19
        ),
20
        TextButton(
21
          onPressed: () => Navigator.pop(context, controller.text),
22
          child: Text('추가'),
23
        ),
24
      ],
25
    ),
26
  );
27

28
  if (title == null || title.isEmpty) return;
29

30
  try {
31
    final newTodo = await _api.createTodo(
32
      Todo(title: title),
33
    );
34

35
    setState(() {
36
      _todos.insert(0, newTodo);  // 맨 앞에 추가
37
    });
38
  } catch (e) {
39
    ScaffoldMessenger.of(context).showSnackBar(
40
      SnackBar(content: Text('추가 실패: $e')),
41
    );
42
  }
43
}

1
Future<void> _toggleTodo(Todo todo) async {
2
  // 1. 먼저 UI 업데이트 (낙관적)
3
  final index = _todos.indexWhere((t) => t.id == todo.id);
4
  final updatedTodo = todo.copyWith(completed: !todo.completed);
5

6
  setState(() {
7
    _todos[index] = updatedTodo;
8
  });
9

10
  try {
11
    // 2. 서버에 요청
12
    await _api.updateTodo(updatedTodo);
13
  } catch (e) {
14
    // 3. 실패 시 롤백
15
    setState(() {
16
      _todos[index] = todo;  // 원래대로 복구
17
    });
18

19
    ScaffoldMessenger.of(context).showSnackBar(
20
      SnackBar(content: Text('수정 실패: $e')),
21
    );
22
  }
23
}

1
Future<void> _deleteTodo(Todo todo) async {
2
  final confirmed = await showDialog<bool>(
3
    context: context,
4
    builder: (context) => AlertDialog(
5
      title: Text('삭제 확인'),
6
      content: Text('"${todo.title}"을(를) 삭제하시겠습니까?'),
7
      actions: [
8
        TextButton(
9
          onPressed: () => Navigator.pop(context, false),
10
          child: Text('취소'),
11
        ),
12
        TextButton(
13
          onPressed: () => Navigator.pop(context, true),
14
          style: TextButton.styleFrom(foregroundColor: Colors.red),
15
          child: Text('삭제'),
16
        ),
17
      ],
18
    ),
19
  );
20

21
  if (confirmed != true) return;
22

23
  final index = _todos.indexWhere((t) => t.id == todo.id);
24

25
  setState(() {
26
    _todos.removeAt(index);
27
  });
28

29
  try {
30
    await _api.deleteTodo(todo.id!);
31
  } catch (e) {
32
    setState(() {
33
      _todos.insert(index, todo);  // 복구
34
    });
35
    ScaffoldMessenger.of(context).showSnackBar(
36
      SnackBar(content: Text('삭제 실패')),
37
    );
38
  }
39
}

1
class _TodoListScreenState extends State<TodoListScreen> {
2
  final TodoApi _api = TodoApi();
3

4
  List<Todo> _todos = [];
5
  bool _isLoading = true;
6
  String? _error;
7
  Set<int> _updatingIds = {};
8

9
  @override
10
  void initState() {
11
    super.initState();
12
    _loadTodos();
13
  }
14

15
  // Read
16
  Future<void> _loadTodos() async {
17
    setState(() {
18
      _isLoading = true;
19
      _error = null;
20
    });
21

22
    try {
23
      final todos = await _api.fetchTodos();
24
      setState(() {
25
        _todos = todos;
26
        _isLoading = false;
27
      });
28
    } catch (e) {
29
      setState(() {
30
        _error = e.toString();
31
        _isLoading = false;
32
      });
33
    }
34
  }
35

36
  // Create
37
  Future<void> _addTodo() async {
38
    // ... (챕터 3 참조)
39
  }
40

41
  // Update
42
  Future<void> _toggleTodo(Todo todo) async {
43
    // ... (챕터 4 참조)
44
  }
45

46
  Future<void> _editTodo(Todo todo) async {
47
    // ... (챕터 4 참조)
48
  }
49

50
  // Delete
51
  Future<void> _deleteTodo(Todo todo) async {
52
    // ... (챕터 5 참조)
53
  }
54

55
  @override
56
  Widget build(BuildContext context) {
57
    return Scaffold(
58
      appBar: AppBar(
59
        title: Text('할 일 목록'),
60
        actions: [
61
          IconButton(
62
            icon: Icon(Icons.refresh),
63
            onPressed: _loadTodos,
64
          ),
65
        ],
66
      ),
67
      body: _buildBody(),
68
      floatingActionButton: FloatingActionButton(
69
        onPressed: _addTodo,
70
        child: Icon(Icons.add),
71
      ),
72
    );
73
  }
74

75
  Widget _buildBody() {
76
    if (_isLoading) {
77
      return Center(child: CircularProgressIndicator());
78
    }
79

80
    if (_error != null) {
81
      return _buildErrorState();
82
    }
83

84
    if (_todos.isEmpty) {
85
      return _buildEmptyState();
86
    }
87

88
    return RefreshIndicator(
89
      onRefresh: _loadTodos,
90
      child: ListView.builder(
91
        itemCount: _todos.length,
92
        itemBuilder: (context, index) {
93
          final todo = _todos[index];
94
          return TodoTile(
95
            todo: todo,
96
            onToggle: () => _toggleTodo(todo),
97
            onEdit: () => _editTodo(todo),
98
            onDelete: () => _deleteTodo(todo),
99
          );
100
        },
101
      ),
102
    );
103
  }
104

105
  Widget _buildEmptyState() {
106
    return Center(
107
      child: Column(
108
        mainAxisAlignment: MainAxisAlignment.center,
109
        children: [
110
          Icon(Icons.check_circle_outline, size: 64, color: Colors.grey),
111
          SizedBox(height: 16),
112
          Text('모든 할 일을 완료했습니다!'),
113
        ],
114
      ),
115
    );
116
  }
117

118
  Widget _buildErrorState() {
119
    return Center(
120
      child: Column(
121
        mainAxisAlignment: MainAxisAlignment.center,
122
        children: [
123
          Icon(Icons.error_outline, size: 64, color: Colors.red),
124
          SizedBox(height: 16),
125
          Text('오류가 발생했습니다'),
126
          SizedBox(height: 8),
127
          ElevatedButton(
128
            onPressed: _loadTodos,
129
            child: Text('다시 시도'),
130
          ),
131
        ],
132
      ),
133
    );
134
  }
135
}