🦋 Flutter로 할 일 관리 앱 구현하기

Flutter 예제

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

Flutter로 할 일 관리 앱 구현하기

중급
태그
예제 실습 프로젝트 할일관리 로컬저장소
## 프로젝트 개요
일정 관리를 위한 간단한 할 일 목록 앱을 구현합니다. 로컬 저장소를 사용해 데이터를 지속적으로 유지하고, 상태 관리와 UI 반응성을 고려한 실무 패턴을 적용했습니다.

## 주요 기능
- 할 일 생성 및 삭제
- 완료/미완료 상태 표시
- 필터링 기능 (모두보기, 완료된 보기, 미완료 보기)
- 로컬 저장소 연동 (Hive 사용)

## 사용 방법
1. Hive 플러그인을 프로젝트에 추가합니다.
2. 앱 실행 시 자동으로 할 일 데이터가 불러집니다.
3. 상단 버튼으로 필터링 옵션을 변경할 수 있습니다.
4. 하단 버튼으로 새로운 할 일을 입력 후 등록

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