## 프로젝트 개요
모바일 앱에서 로컬 스토리지에 할 일 목록을 저장하고 관리하는 실무 예제입니다. 사용자가 인터페이스를 통해 할 일을 추가, 완료 여부 변경 및 삭제할 수 있으며, 네트워크 없이도 데이터가 유지됩니다.
## 주요 기능
- 할 일 항목 추가
- 완료 상태 토글
- 항목 삭제
- 로컬 스토리지에 자동 저장
- 입력 유효성 검사 및 에러 처리
## 사용 방법
1. Flutter 환경 설정 후 프로젝트 생성
2. main.dart 파일에 아래 코드 복사 후 실행
3. 앱에서 할 일을 추가하고 상태를 변경해보세요
4. 앱을 종료해도 데이터가 유지됨을 확인
## 확장 가능성
- 서버와 연동한 클라우드 저장 기능 추가
- 알림 기능 구현
- 카테고리별 분류 추가
🎯 로컬 스토리지 활용 할일 관리 앱
Dart 예제
중급
난이도
예제
타입
10/24
등록일
로컬 스토리지 활용 할일 관리 앱
중급태그
코드 예제
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(TodoApp());
class TodoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '할 일 관리 앱',
home: TodoListScreen(),
);
}
}
class TodoListScreen extends StatefulWidget {
@override
_TodoListScreenState createState() => _TodoListScreenState();
}
class _TodoListScreenState extends State<TodoListScreen> {
final TextEditingController _controller = TextEditingController();
List<Map<String, dynamic>> _todos = [];
@override
void initState() {
super.initState();
_loadTodos();
}
Future<void> _loadTodos() async {
final prefs = await SharedPreferences.getInstance();
final storedTodos = prefs.getStringList('todos');
if (storedTodos != null) {
setState(() {
_todos = storedTodos.map((todo) => Map<String, dynamic>.from(jsonDecode(todo))).toList();
});
}
}
Future<void> _saveTodos() async {
final prefs = await SharedPreferences.getInstance();
final encodedTodos = _todos.map((todo) => jsonEncode(todo)).toList();
await prefs.setStringList('todos', encodedTodos);
}
void _addTodo(String text) {
if (text.trim().isEmpty) return;
setState(() {
_todos.add({
'id': DateTime.now().microsecondsSinceEpoch.toString(),
'text': text,
'completed': false,
});
_controller.text = '';
});
_saveTodos();
}
void _toggleComplete(String id) {
setState(() {
final index = _todos.indexWhere((todo) => todo['id'] == id);
if (index != -1) {
_todos[index]['completed'] = !_todos[index]['completed'];
_saveTodos();
}
});
}
void _deleteTodo(String id) {
setState(() {
final index = _todos.indexWhere((todo) => todo['id'] == id);
if (index != -1) {
_todos.removeAt(index);
_saveTodos();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('할 일 관리 앱')),
body: Column(
children: [
Container(
padding: EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
onSubmitted: (value) => _addTodo(value),
decoration: InputDecoration(labelText: '할 일 추가'),
),
),
IconButton(
icon: Icon(Icons.add),
onPressed: () => _addTodo(_controller.text),
),
],
),
),
Expanded(
child: ListView.builder(
itemCount: _todos.length,
itemBuilder: (context, index) {
final todo = _todos[index];
return ListTile(
title: Text(todo['text']),
trailing: Checkbox(
value: todo['completed'],
onChanged: (value) => _toggleComplete(todo['id']),
),
onLongPress: () => _deleteTodo(todo['id']),
);
},
),
),
],
),
);
}
}
등록일: 2025년 10월 24일 02:37
언어 정보
언어
Dart
카테고리
Mobile
인기도
#15
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요