[Flutter] 할 일 관리 앱 개발하기: 데이터 관리와 기능 구현
안녕하세요! 이번 포스팅에서는 이전 포스팅에서 설계한 할 일 관리 앱에 대해 데이터 관리와 기능 구현에 대해 알아보겠습니다. 실제 데이터를 관리하고, 사용자의 입력을 처리하며, 앱의 기능을 완성하는 작업을 진행해보겠습니다.
1. 데이터 모델링
먼저, 앱에서 사용할 데이터 모델을 설계합니다. 할 일에 대한 정보를 담는 데이터 클래스를 만들고 필요한 속성과 메서드를 정의합니다. 예를 들어, 할 일의 제목, 내용, 완료 여부 등을 저장하는 데이터 모델을 만들 수 있습니다.
// 데이터 모델
class Todo {
String title;
String description;
bool isCompleted;
Todo({
required this.title,
required this.description,
this.isCompleted = false,
});
}
2. 데이터 관리
Flutter에서 데이터 관리를 위해 상태 관리 패턴 중 하나인 Provider 패턴을 활용할 수 있습니다. Provider 패턴을 사용하여 앱 전역에서 데이터에 접근하고 업데이트할 수 있도록 구성합니다. 데이터를 읽고 쓰기 위한 Provider 클래스를 작성하고, 필요한 데이터를 제공하는 Provider를 생성합니다.
// 데이터 관리를 위한 Provider 클래스
class TodoProvider with ChangeNotifier {
List<Todo> _todos = [];
List<Todo> get todos => _todos;
void addTodo(Todo todo) {
_todos.add(todo);
notifyListeners();
}
void updateTodoStatus(int index, bool isCompleted) {
_todos[index].isCompleted = isCompleted;
notifyListeners();
}
void deleteTodo(int index) {
_todos.removeAt(index);
notifyListeners();
}
}
3. 사용자 입력 처리
사용자가 할 일을 추가, 수정, 삭제하는 등의 입력을 처리하는 기능을 구현합니다. 사용자의 입력을 받아 데이터를 업데이트하고, 화면에 반영하는 작업을 수행합니다. 예를 들어, 할 일을 추가하는 폼을 만들고 입력을 처리하여 데이터에 저장하는 기능을 구현할 수 있습니다.
4. 앱의 기능 구현
앱에 다양한 기능을 추가하여 사용자 경험을 향상시킵니다. 예를 들어, 할 일을 완료/미완료로 토글하는 기능, 할 일 목록을 필터링하는 기능, 할 일을 정렬하는 기능 등을 구현할 수 있습니다. 사용자가 편리하게 할 일을 관리할 수 있도록 다양한 기능을 제공합니다.
5. UI와의 연동
데이터 관리와 기능 구현을 완료한 뒤, UI와의 연동을 처리합니다. 데이터의 상태에 따라 UI를 업데이트하고, 사용자 입력에 따라 적절한 동작을 수행하도록 UI와 데이터를 연결합니다. Provider를 활용하여 UI와 데이터 간의 상호작용을 원활하게 처리합니다.
// 앱의 진입점
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => TodoProvider(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Todo App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TodoListScreen(),
);
}
}
class TodoListScreen extends StatelessWidget {
final TextEditingController _titleController = TextEditingController();
final TextEditingController _descriptionController = TextEditingController();
@override
Widget build(BuildContext context) {
final todoProvider = Provider.of<TodoProvider>(context);
return Scaffold(
appBar: AppBar(
title: Text('Todo List'),
),
body: ListView.builder(
itemCount: todoProvider.todos.length,
itemBuilder: (context, index) {
final todo = todoProvider.todos[index];
return ListTile(
title: Text(todo.title),
subtitle: Text(todo.description),
trailing: Checkbox(
value: todo.isCompleted,
onChanged: (value) {
todoProvider.updateTodoStatus(index, value ?? false);
},
),
onLongPress: () {
todoProvider.deleteTodo(index);
},
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Add Todo'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: _titleController,
decoration: InputDecoration(labelText: 'Title'),
),
TextField(
controller: _descriptionController,
decoration: InputDecoration(labelText: 'Description'),
),
],
),
actions: [
ElevatedButton(
onPressed: () {
final title = _titleController.text;
final description = _descriptionController.text;
final todo = Todo(
title: title,
description: description,
);
todoProvider.addTodo(todo);
_titleController.clear();
_descriptionController.clear();
Navigator.pop(context);
},
child: Text('Add'),
),
],
);
},
);
},
child: Icon(Icons.add),
),
);
}
}
이렇게 데이터 관리와 기능 구현을 완료하면 할 일 관리 앱의 핵심 기능을 구현한 것입니다. 다음 포스팅에서는 앱의 외관을 디자인하고 사용자 인터페이스를 개선하는 방법에 대해 알아보겠습니다. 계속해서 함께 공부해봅시다!