[Flutter_개발]투두앱 만들기

이번 강의에서는 Flutter를 활용해 간단한 투두(To-Do) 앱을 구현했다.
단순히 할 일을 표시하고 삭제하는 기능을 넘어서, 앱 구조 설계, 상태관리, 위젯 분리, 사용자 입력 처리 등 실제 앱 개발에서 자주 활용되는 핵심 개념들을 학습했다.

1. 투두앱 UI 구성

앱의 전체적인 화면은 Scaffold를 기반으로 상단에는 AppBar, 하단에는 할 일 입력창(TextField), 중앙에는 할 일 목록(ListView) 이 위치하도록 설계했다.

프로젝트 구조 설정
main.dart에서 HomePage를 초기 화면으로 설정하고, home_page.dart에 앱의 기본 UI를 구성했다.
AppBar & TextField 구현
- AppBar에 “TO DO” 타이틀을 표시
- TextField를 bottomSheet 영역에 배치하여 키보드가 올라와도 사라지지 않도록 함
- TextEditingController를 이용해 입력값을 관리하고, 엔터 입력(onSubmitted) 또는 + 버튼 클릭(suffixIcon)으로 데이터 추가를 처리했다.

bottomSheet: Container(
  padding: EdgeInsets.all(20),
  child: TextField(
    controller: textController,
    decoration: InputDecoration(
      hintText: "Add Item",
      suffixIcon: GestureDetector(
        onTap: () {
          print("아이템 추가");
        },
        child: Icon(Icons.add, color: Colors.white),
      ),
    ),
  ),
),

Todo 위젯 분리
같은 구조의 코드가 반복되던 리스트 아이템 부분을 별도 파일(todo_widget.dart)로 분리하여 재사용성을 높였다.
각 항목은 완료 여부(isDone)에 따라 아이콘 색상과 스타일이 다르게 표시되도록 했다.

2. StatefulWidget을 활용한 CRUD 기능 구현

UI 구축 후, StatefulWidget을 사용해 투두앱의 핵심 기능인 CRUD(Create, Read, Update, Delete) 로직을 구현했다.

(1) Create – 할 일 추가

입력창에 텍스트를 입력하고 엔터 또는 버튼을 눌렀을 때 onCreate() 함수가 실행된다.
Todo 클래스를 정의하여 각 항목을 객체로 관리하고, 입력값이 비어있지 않을 때만 리스트에 추가한다.

void onCreate() {
  if (textController.text.trim().isNotEmpty) {
    setState(() {
      todoList.add(Todo(title: textController.text, isDone: false));
    });
    textController.clear();
  }
}

(2) Read – 목록 표시

ListView.separated를 이용해 todoList의 내용을 화면에 출력했다.
각 항목은 TodoWidget으로 구성되어 UI 일관성을 유지했다.

(3) Update – 완료 상태 변경

항목을 터치하면 GestureDetector의 onTap 이벤트가 발생하고,
해당 항목의 isDone 값을 반전시켜 완료 상태를 토글하도록 구현했다.

onTap: () {
  setState(() {
    item.isDone = !item.isDone;
  });
},

(4) Delete – 항목 삭제

항목을 길게 누르면 iOS 스타일의 showCupertinoDialog를 띄워 삭제 여부를 물어본다.
“삭제”를 선택하면 리스트에서 해당 항목을 제거한다.

if (result) {
  setState(() {
    todoList.removeAt(index);
  });
}

이번 강의를 통해 StatefulWidget과 setState()의 작동 원리를 실제 예제를 통해 익히며, 상태 변화에 따라 UI가 어떻게 즉시 갱신되는지를 명확히 이해할 수 있었다. 또한 반복되는 UI 구조를 별도의 위젯으로 분리함으로써 코드의 재사용성과 유지보수성을 크게 높일 수 있었다. 간단한 앱이라도 데이터 구조 설계, 이벤트 처리, 상태 관리가 조화롭게 이루어져야 안정적인 앱이 만들어진다는 점을 체감했다. 작은 규모의 투두앱이었지만, Flutter의 기본 구조와 상태 관리의 중요성을 실감할 수 있었고, 앞으로 더 복잡한 프로젝트에서는 Provider나 Riverpod 같은 상태관리 도구를 활용해 확장할 수 있겠다는 방향성도 얻었다.

ok0530 님의 블로그