본문 바로가기

카테고리 없음

[Flutter_개발] 투두앱 개발 및 트러블슈팅

배경

Flutter를 이용해 ToDo 앱을 완성하고, 프로젝트를 GitHub에 업로드하기 위해 실행 테스트를 진행했다.
하지만 실행 도중 환경 변수 인식, GitHub 인증, 코드 빌드 등에서 여러 문제가 발생했다.
코드 관련 실수를 포함하여 그 해결 과정을 정리했다.

발단

프로젝트를 로컬 환경에서 실행하려 했으나, 앱이 화면에 표시되지 않거나 콘솔에 에러 메시지만 출력되었다.
이 과정에서 몇 가지 실수들이 함께 드러났다.

전개

1. pubspec.yaml 구조 오류

문제:
flutter pub get 실행 시 다음과 같은 에러 발생

 
Error on line 90, column 1: Duplicate mapping key.

원인:
dependencies: 나 flutter: 블록이 중복 작성되었다.
YAML 문법은 들여쓰기 공백(스페이스 2칸)도 엄격하게 구분한다.

해결:

  • 중복 블록 제거 및 들여쓰기 수정했다

2. setState() 사용 위치 오류

문제:

 
setState() called during build.

원인:
build() 함수 실행 중 위젯 상태 변경을 시도했기 때문이다.
State 변경은 사용자 입력이나 이벤트 이후에만 호출해야 한다.

해결:

  • 다음처럼 initState() 대신 onPressed 등 이벤트 안에서 호출했다
onPressed: () {
  setState(() {
    todos.add(newTodo);
  });
}

 

 

3. Navigator.pop 반환값 누락

문제:
할 일을 추가하고 돌아와도 리스트에 반영되지 않았다.

원인:
추가 페이지(AddTodoSheet)에서 데이터를 Navigator.pop(context, data)로 반환하지 않았다.

해결:

  • 상세 페이지에서 다음처럼 수정했다.
Navigator.pop(context, newTodo);
  • 호출부에서 Future로 결과 받기:
 
final result = await Navigator.push(...);
if (result != null) setState(() => todos.add(result));

 

4. GitHub 충돌 및 인증 오류

문제:

원인:

본래 쓰던 컴퓨터와 다른기기로 작업을해서 새로 푸쉬를 해야하는 상황에서
GitHub 기본 비밀번호 인증이 막혀 있고, 토큰(PAT) 사용이 필수화되었다.
또한 원격 저장소(main)에 README가 이미 존재하여 충돌이 발생했다.

해결:

안전하게 새 브랜치에서 작업했다.

git rebase --abort
git checkout -b feature/tasks
git push -u origin feature/tasks

절정

새 브랜치를 생성(feature/tasks) 후 다시 푸시하자 오류 없이 업로드가 완료됐다.
Flutter 앱도 로컬 에뮬레이터에서 정상 실행되었고, UI와 기능이 모두 의도대로 작동했다.

결말

한글 입력이 되지 않던 문제도 에뮬레이터 키보드 설정을 통해 해결했다.
Gboard → Languages → Korean(두벌식) 설정으로 입력 정상화했고

결국 앱이 정상 작동했으며, 폴더 구조 관리와 브랜치 전략의 중요성을 직접 체감했다.

 

마무리

이번 프로젝트를 진행하면서 최대한 필수 기능을 완성시킬려고 노력하고 안정성과 사용성을 신경써서 만들었다고 생각한다. 물론 코드 작성하면서도 실수가 있었지만 환경설정하는 부분에서도 오류가 있었다. 폴더를 보기쉽게 구분하고 환경설정을 하는것이 단순히 초기 세팅이 아니라 완성도에 영향을 미치는 핵심 요소중 하나라는 것을 느꼈다.

다음 프로젝트를 진행하게 된다면 이런 부분들을 더 신경쓰고 사용성에 관련 해서도 개인적인 아이디어를 추가 해 보고싶다.