Flutter로 To-Do 앱 만들기 (1): 모바일 앱 개발 첫걸음

 

Flutter로 To-Do 앱 만들기 (1): 모바일 앱 개발 첫걸음

Flutter는 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있는 Google의 크로스 플랫폼 프레임워크입니다.
이번 글은 Flutter 입문자를 위한 실전 프로젝트로, **할 일 목록 앱(To-Do App)**을 직접 만들어보며
기본 위젯 사용법, 상태 관리, 리스트 렌더링 등을 익히는 것이 목표입니다.

---

✅ 프로젝트 세팅

▶️ 1. Flutter 설치 확인

flutter --version

설치가 되어 있지 않다면 https://docs.flutter.dev/get-started/install 가이드를 참고해주세요.

---

▶️ 2. 새 프로젝트 생성

flutter create todo_app
cd todo_app
code .

lib/main.dart 파일을 열고 아래 코드로 교체합니다.

---

✅ 기본 To-Do 앱 구현

반응형

import 'package:flutter/material.dart';

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

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do App',
      home: const TodoHomePage(),
    );
  }
}

class TodoHomePage extends StatefulWidget {
  const TodoHomePage({super.key});

  @override
  State<TodoHomePage> createState() => _TodoHomePageState();
}

class _TodoHomePageState extends State<TodoHomePage> {
  final TextEditingController _controller = TextEditingController();
  final List<Map<String, dynamic>> _todos = [];

  void _addTodo() {
    final text = _controller.text.trim();
    if (text.isEmpty) return;

    setState(() {
      _todos.add({'id': DateTime.now().millisecondsSinceEpoch, 'text': text});
      _controller.clear();
    });
  }

  void _deleteTodo(int id) {
    setState(() {
      _todos.removeWhere((todo) => todo['id'] == id);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('할 일 목록')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                hintText: '할 일을 입력하세요',
              ),
              onSubmitted: (_) => _addTodo(),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _addTodo,
              child: const Text('추가'),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _todos.length,
                itemBuilder: (context, index) {
                  final todo = _todos[index];
                  return Card(
                    child: ListTile(
                      title: Text(todo['text']),
                      trailing: IconButton(
                        icon: const Icon(Icons.delete),
                        onPressed: () => _deleteTodo(todo['id']),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

✅ 핵심 기능 설명

기능 위젯/기술

사용자 입력	TextField, TextEditingController
상태 저장	setState, 리스트 상태
항목 추가	버튼 클릭 또는 엔터 시 동작
항목 삭제	ListTile 내 삭제 버튼
리스트 표시	ListView.builder

---

✅ 실행 결과 예시

• 앱 타이틀: 할 일 목록
• 입력창에 할 일을 입력하고 “추가” 클릭
• 리스트에 항목이 쌓이고, 삭제 버튼으로 제거 가능

[ 할 일을 입력하세요 ] [추가 버튼]
---------------------------
- 공부하기       [🗑️]
- 운동하기       [🗑️]

---

✅ 다음 글 예고

다음 편에서는 shared_preferences 패키지를 활용하여 앱을 껐다 켜도 할 일 목록이 저장되도록 하는 기능을 추가해보겠습니다.
또한 간단한 다크 모드 적용도 다뤄보겠습니다!

 

---

이제 시리즈 2편으로 넘어가실까요? 아니면 이 글에 대한 편집/확장 원하신 부분이 있을까요? 😊