refactor: 위젯 분리

suu3 · Jul 3, 2024 · f4f45e6 · f4f45e6
1 parent 05e5b94
commit f4f45e6
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 59 deletions.
diff --git a/lib/screens/home.dart b/lib/screens/home.dart
@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_riverpod_demo/providers/task_provider.dart';
 import 'package:flutter_riverpod_demo/widgets/add_task_bottomsheet.dart';
 import 'package:flutter_riverpod_demo/widgets/empty_task_list.dart';
+import 'package:flutter_riverpod_demo/widgets/task_list.dart';
 
 class MyHome extends ConsumerWidget {
   const MyHome({super.key});
@@ -28,70 +29,12 @@ class MyHome extends ConsumerWidget {
 
     return Scaffold(
       appBar: AppBar(
-        // leading: IconButton(
-        //   icon: const Icon(Icons.menu, color: Colors.white),
-        //   onPressed: () {},
-        // ),
         title: const Text('할 일 목록', style: TextStyle(color: Colors.white)),
         centerTitle: true,
       ),
       body: Container(
         padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
-        child: taskList.isNotEmpty
-            ? ListView.builder(
-                itemCount: taskList.length,
-                itemBuilder: (context, index) {
-                  final task = taskList[index];
-                  return Padding(
-                    padding:
-                        const EdgeInsets.symmetric(vertical: 3, horizontal: 16),
-                    child: Card(
-                      child: ListTile(
-                        leading: IconButton(
-                          icon: Icon(
-                            task.isCompleted
-                                ? Icons.check_circle
-                                : Icons.radio_button_unchecked,
-                            color: task.isCompleted ? Colors.green : null,
-                          ),
-                          onPressed: () {
-                            ref
-                                .read(taskListProvider.notifier)
-                                .toggleTaskCompletion(index);
-                          },
-                        ),
-                        title: Text(
-                          task.title,
-                          style: TextStyle(
-                            decoration: task.isCompleted
-                                ? TextDecoration.lineThrough
-                                : null,
-                            color: task.isCompleted ? Colors.grey : null,
-                          ),
-                        ),
-                        subtitle: Text(
-                          '${task.description}\n${task.date} 까지',
-                          style: TextStyle(
-                            color: task.isCompleted
-                                ? Colors.grey.withOpacity(0.5)
-                                : null,
-                          ),
-                        ),
-                        trailing: IconButton(
-                          icon: const Icon(Icons.delete),
-                          color: Colors.red,
-                          onPressed: () {
-                            ref
-                                .read(taskListProvider.notifier)
-                                .removeTask(index);
-                          },
-                        ),
-                      ),
-                    ),
-                  );
-                },
-              )
-            : const EmptyTaskList(),
+        child: taskList.isNotEmpty ? const TaskList() : const EmptyTaskList(),
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: () {

diff --git a/lib/widgets/task_list.dart b/lib/widgets/task_list.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_riverpod_demo/providers/task_provider.dart';
+
+class TaskList extends ConsumerWidget {
+  const TaskList({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final taskList = ref.watch(taskListProvider);
+
+    return ListView.builder(
+      itemCount: taskList.length,
+      itemBuilder: (context, index) {
+        final task = taskList[index];
+        return Padding(
+          padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 16),
+          child: Card(
+            child: ListTile(
+              leading: IconButton(
+                icon: Icon(
+                  task.isCompleted
+                      ? Icons.check_circle
+                      : Icons.radio_button_unchecked,
+                  color: task.isCompleted ? Colors.green : null,
+                ),
+                onPressed: () {
+                  ref
+                      .read(taskListProvider.notifier)
+                      .toggleTaskCompletion(index);
+                },
+              ),
+              title: Text(
+                task.title,
+                style: TextStyle(
+                  decoration:
+                      task.isCompleted ? TextDecoration.lineThrough : null,
+                  color: task.isCompleted ? Colors.grey : null,
+                ),
+              ),
+              subtitle: Text(
+                '${task.description}\n${task.date} 까지',
+                style: TextStyle(
+                  color: task.isCompleted ? Colors.grey.withOpacity(0.5) : null,
+                ),
+              ),
+              trailing: IconButton(
+                icon: const Icon(Icons.delete),
+                color: Colors.red,
+                onPressed: () {
+                  ref.read(taskListProvider.notifier).removeTask(index);
+                },
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}