본문 바로가기

flutter앱개발과정

기차예매 서비스 - 트러블 슈팅(다이얼로그 확인 누르면 검은 화면이 나옴)

예매하기 버튼 클릭 시 검은 화면이 나타나는 문제

문제 상황

Flutter에서 예매 기능을 구현하던 중, 다이얼로그에서 "확인" 버튼을 눌렀을 때 HomePage로 돌아가는 대신 검은 화면이 나타나는 문제가 발생했다.

원인 분석

코드에서는 다음과 같이 Navigator.pop(context)여러 번 호출하고 있었다

Navigator.pop(context); // 다이얼로그 닫기
Navigator.pop(context); // SeatPage 닫기
Navigator.pop(context); // HomePage 닫는 것처럼 보이지만 실제로는 그 이상 pop됨!

Navigator.pop()을 3번 호출한 결과,

  • 첫 번째는 다이얼로그를 닫고,
  • 두 번째는 좌석 선택 페이지(SeatPage)를 닫고,
  • 세 번째는 HomePage까지 닫아버리는 문제가 발생한 것!

결과적으로 Flutter는 더 이상 보여줄 페이지가 없어지고, 검은 화면만 남게 된다.

해결 방법

방법 1: Navigator.pop()을 2번만 호출하기

HomePage로 돌아가는 목적이라면 2번 pop으로 충분하다.

Navigator.pop(context); // 다이얼로그 닫기
Navigator.pop(context); // SeatPage 닫기 → HomePage로 돌아감

방법 2: 명시적으로 홈으로 이동시키기

홈 화면을 확실하게 불러오고 싶을 때는 아래처럼 pushAndRemoveUntil을 사용한다

Navigator.of(context).pushAndRemoveUntil(
  MaterialPageRoute(builder: (context) => HomePage()),
  (route) => false,
);

이 방식은 기존의 모든 페이지 스택을 제거하고 HomePage만 남긴다.

 

  • 페이지를 여러 번 pop 하게 되는 경우, 현재 스택 구조를 먼저 파악하는 것이 중요하다.
  • 예매 완료 후 뒤로 돌아갈 때는 pop을 너무 많이 하지 않도록 주의할 것!