setState() called after dispose() [flutter] error

아래 오류는 플러터(flutter)를 처음 접하는 개발자부터 중급 이상의 개발자까지 두루 접하게 되는 문제인것 같아요!

저도 개발하면서 몇번이나 만났는지 몰라요ㅎㅎ 😆

Error

setState() called after dispose().

이 에러는 대부분의 경우 비동기 작업 중에 발생하는데, 해당 작업이 완료되기 전에 해당 위젯이 dispose되었을 때 발생합니다. 일반적으로 이 문제는 비동기 작업이 완료되기 전에 해당 위젯이 화면에서 사라지는 경우 발생하는데, 여기서는 시간 선택 후에 해당 위젯이 dispose되기 때문에 발생한 것 같네요.

이 문제를 해결하기 위해서는 비동기 작업이 완료된 후에 setState()를 호출하지 않도록 해야합니다.

해당 코드를 작동할 때 나오는 로그에요ㅎㅎ 같이 살펴볼까요?

로그

setState() called after dispose()

위의 로그를 자세히 읽어보면 몇가지 해결 방법을 추천해 주고 있네요~~ 😇

우선, 이 에러가 발생한 원인부터 살펴봐요.

원인

해당 에러는 비동기 작업이 완료된 후에 해당 위젯이 dispose되었을 때 발생합니다. 여기서는 시간 선택 후에 해당 위젯이 dispose되기 때문에 발생한 것 같네요.

그럼 어떻게 해결해야할까요?

몇가지 해결책을 알려드릴게요 😎

해결책

1. 비동기 작업이 완료된 후에만 setState()를 호출하도록 변경하기
2. Future initTimePicker() async { final TimeOfDay picked = await showTimePicker( context: context, initialTime: new TimeOfDay(hour: selectedDate.hour, minute: selectedDate.minute), ); if (picked != null) { selectedDate = new DateTime(selectedDate.year, selectedDate.month, selectedDate.day, picked.hour, picked.minute); setState(() {}); // move setState() here } }
3. dispose() 메소드에서 비동기 작업 취소하기
4. @override void dispose() { // cancel any ongoing async tasks // 예시: _timer.cancel(); super.dispose(); }
5. 비동기 작업이 완료된 후에만 setState()를 호출하는 방법을 찾기