예제로 배우는 Dart & Flutter 시작하기 ⏹️ 마무리 프로젝트 - 나만의 TODO 앱 만들기

예제로 배우는 Dart & Flutter 시작하기 ⏹️ 마무리 프로젝트 - 나만의 TODO 앱 만들기

지금까지 Dart 문법부터 Flutter 위젯, 화면 전환까지 배웠다면, 이제 직접 간단한 실전 앱을 만들어보며 복습할 시간입니다.
이번 글에서는 할 일 관리 앱(To-Do List App) 을 함께 만들어보며 지금까지 배운 기술들을 실제로 적용해봅니다.

---

📌 1. 앱 기능 소개

이 프로젝트에서 만들 To-Do 앱은 다음과 같은 기능을 갖습니다:

• 할 일 입력하기
• 할 일 목록 보여주기
• 완료 처리 / 삭제하기
• 화면 간 전환 없이 동작 (단일 화면)

---

📌 2. 프로젝트 기본 설정

✅ 새 프로젝트 생성

flutter create todo_app
cd todo_app
code .

✅ lib/main.dart 열기

---

📌 3. 데이터 모델 만들기

반응형

class Todo {
  String title;
  bool isDone;

  Todo({
    required this.title,
    this.isDone = false,
  });
}

---

📌 4. 전체 코드 구조

import 'package:flutter/material.dart';

void main() => runApp(TodoApp());

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do App',
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: TodoHomePage(),
    );
  }
}

---

📌 5. 메인 화면 만들기

class TodoHomePage extends StatefulWidget {
  @override
  State<TodoHomePage> createState() => _TodoHomePageState();
}

class _TodoHomePageState extends State<TodoHomePage> {
  final List<Todo> _todos = [];
  final TextEditingController _controller = TextEditingController();

  void _addTodo() {
    if (_controller.text.isEmpty) return;
    setState(() {
      _todos.add(Todo(title: _controller.text));
      _controller.clear();
    });
  }

  void _toggleTodo(int index) {
    setState(() {
      _todos[index].isDone = !_todos[index].isDone;
    });
  }

  void _removeTodo(int index) {
    setState(() {
      _todos.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('나만의 할 일 앱'),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: '할 일을 입력하세요',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: _addTodo,
                  child: Text('추가'),
                ),
              ],
            ),
            SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _todos.length,
                itemBuilder: (context, index) {
                  final todo = _todos[index];
                  return ListTile(
                    leading: IconButton(
                      icon: Icon(
                        todo.isDone ? Icons.check_circle : Icons.circle_outlined,
                        color: todo.isDone ? Colors.green : Colors.grey,
                      ),
                      onPressed: () => _toggleTodo(index),
                    ),
                    title: Text(
                      todo.title,
                      style: TextStyle(
                        decoration: todo.isDone ? TextDecoration.lineThrough : null,
                      ),
                    ),
                    trailing: IconButton(
                      icon: Icon(Icons.delete, color: Colors.red),
                      onPressed: () => _removeTodo(index),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

📌 6. 실습 요약

• TextField: 사용자 입력받기
• ListView.builder: 동적 리스트 생성
• ListTile: 각 할 일을 카드처럼 표시
• setState(): 상태 업데이트하여 UI 갱신
• IconButton: 체크/삭제 아이콘 제어

---

📌 7. 확장 아이디어

• 완료한 할 일은 아래로 내리기
• 다크 모드 지원
• 로컬 저장 (shared_preferences)
• 날짜별 정렬, 알림 기능 등

---

📌 8. 이번 글에서 배운 내용

• Dart로 사용자 정의 데이터 모델 만들기
• Flutter 위젯을 활용한 동적 UI 구성
• 상태 기반으로 UI 갱신하는 setState() 이해
• CRUD(생성, 읽기, 삭제) 간단 구현

---

🏁 축하합니다!

이 시리즈를 통해 Dart와 Flutter의 기초부터 실전 프로젝트까지 전부 경험하셨습니다. 🎉
이제 여러분은 자신의 앱을 직접 기획하고 개발할 수 있는 실력을 갖췄습니다!

---

 

Flutter todo 앱 만들기,Flutter 프로젝트 예제,Dart 실습 프로젝트,Flutter 상태관리,setState 사용법,Flutter 할일 앱,Flutter TextField 활용,Flutter ListView 예제,Flutter CRUD 앱,Dart Flutter 마무리 예제