## 프로젝트 개요
일정 관리를 위한 간단한 할 일 목록 앱을 구현합니다. 로컬 저장소를 사용해 데이터를 지속적으로 유지하고, 상태 관리와 UI 반응성을 고려한 실무 패턴을 적용했습니다.
## 주요 기능
- 할 일 생성 및 삭제
- 완료/미완료 상태 표시
- 필터링 기능 (모두보기, 완료된 보기, 미완료 보기)
- 로컬 저장소 연동 (Hive 사용)
## 사용 방법
1. Hive 플러그인을 프로젝트에 추가합니다.
2. 앱 실행 시 자동으로 할 일 데이터가 불러집니다.
3. 상단 버튼으로 필터링 옵션을 변경할 수 있습니다.
4. 하단 버튼으로 새로운 할 일을 입력 후 등록
## 확장 가능성
- 서버와의 동기화 기능 추가
- 카테고리별 분류 기능 구현
- 알림 시스템 통합
🦋 Flutter로 할 일 관리 앱 구현하기
Flutter 예제
중급
난이도
예제
타입
10/13
등록일
Flutter로 할 일 관리 앱 구현하기
중급태그
코드 예제
import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'dart:io';
void main() async {
// Hive 초기화 및 저장소 설정
WidgetsFlutterBinding.ensureInitialized();
await Hive.initFlutter();
if (!Hive.isAdapterRegistered('Task')) {
Hive.registerAdapter(TaskAdapter());
}
final app = MaterialApp(
home: TodoApp(),
);
runApp(app);
}
class Task {
String? id;
String title;
bool isDone = false;
Task({required this.title});
}
class TaskAdapter extends HiveTypeAdapter<Task> {
@override
final type = Task;
@override
late final Map<String, dynamic> properties = {
'title': String,
'isDone': bool,
};
@override
void fromMap(Map map) {
id = map['id'] as String? ?? Hive.uniqueId();
title = map['title'] as String;
isDone = map['is bại'] as bool;
}
@override
Map<String, dynamic> toMap() => {
'id': id,
'title': title,
'isDone': isDone,
};
}
class TodoApp extends StatefulWidget {
const TodoApp({super.key});
@override
State<TodoApp> createState() => _TodoAppState();
}
class _TodoAppState extends State<TodoApp> {
final TextEditingController _controller = TextEditingController();
late final Box<Task> _taskBox = Hive.box('tasks');
String? _selectedFilter;
@override
void initState() {
super.initState();
_selectedFilter = 'all';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('할 일 관리 앱'), actions: [
PopupMenuButton<String>(
onSelected: (value) => setState(() => _selectedFilter = value),
itemBuilder: (context) => [
'모두 보기',
'완료된 보기',
'미완료 보기',
].map((filter) => PopupMenuItem(value: filter, child: Text(filter))).toList(),
),
]),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _taskBox.length,
itemBuilder: (context, index) {
final task = _taskBox.getAt(index);
if (_selectedFilter == 'completed' && !task.isDone) return null;
if (_selectedFilter == 'pending' && task.isDone) return null;
return CheckboxListTile(
title: Text(task.title),
value: task.isDone,
onChanged: (value) {
setState(() => task.isDone = value!);
_taskBox.putAt(index, task);
},
secondary: const Icon(Icons.task),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
final text = _controller.text.trim();
if (text.isNotEmpty) {
try {
final task = Task(title: text);
_taskBox.add(task);
_controller.clear();
} catch (e) {
// 에러 처리 예시
print('할 일 저장 중 오류 발생: $e');
}
}
},
child: const Icon(Icons.add),
),
);
}
}
등록일: 2025년 10월 13일 03:58
언어 정보
언어
Flutter
카테고리
Mobile
인기도
#30
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요