[Flutter] setState() called after dispose() 에러

문제 상황

타이머 위젯을 만들면서 타이머가 동작하고 있는 동안 위젯이 위젯 트리에서 dispose되니 제목과 같은 에러가 나타났다.

에러 메시지 내용 그대로 setState()가 선언된 위젯, 혹은 해당 위젯의 부모위젯이 dispose된 후 setState()가 호출된 경우를 나타낸다고는 이해했지만 위젯이 dispose된 것을 어떻게 감지하는지 몰라 구글링을 통해 해결 방법을 찾아봤다.

해결 방법

플러터의 위젯은 mounted라는 bool값을 가지고 있는데, true인 경우에는 위젯트리에 해당 위젯이 존재함을 의미하고, false인 경우에는 dispose되었음을 알려준다.

그렇기 때문에 this.mounted를 통해 현재 위젯이 위젯트리에 mounted 상태인지 아닌지를 알 수 있다. 이를 통해 mounted된 경우에만 setState()를 호출하면 된다.

SomeWidget(
  onPressed: () {
    if(this.mounted) setState(() { /* chage state */});
  }
),

this의 경우 생략이 가능하므로 이런 방식으로도 사용할 수 있다.

if(mounted) setState(() {});