🎯 로컬 스토리지 활용 할일 관리 앱

Dart 예제

중급 난이도
예제 타입
10/24 등록일

로컬 스토리지 활용 할일 관리 앱

중급
태그
실무 모바일 로컬스토리지 타스크관리 에러처리
## 프로젝트 개요
모바일 앱에서 로컬 스토리지에 할 일 목록을 저장하고 관리하는 실무 예제입니다. 사용자가 인터페이스를 통해 할 일을 추가, 완료 여부 변경 및 삭제할 수 있으며, 네트워크 없이도 데이터가 유지됩니다.

## 주요 기능
- 할 일 항목 추가
- 완료 상태 토글
- 항목 삭제
- 로컬 스토리지에 자동 저장
- 입력 유효성 검사 및 에러 처리

## 사용 방법
1. Flutter 환경 설정 후 프로젝트 생성
2. main.dart 파일에 아래 코드 복사 후 실행
3. 앱에서 할 일을 추가하고 상태를 변경해보세요
4. 앱을 종료해도 데이터가 유지됨을 확인

## 확장 가능성
- 서버와 연동한 클라우드 저장 기능 추가
- 알림 기능 구현
- 카테고리별 분류 추가
코드 예제
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
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요