[플러터] initState, dispose를 불러오지 않는 경우

이슈

플러터에서 동일한 위젯(클래스) 2개 이상을 다른 속성 값으로 정의하고

위젯들을 순서대로 호출하여 화면에 출력하는 경우, 2번째부터 위젯이 갱신이 되지 않는 경우가 발생하곤 한다.

이를 디버깅 해보면 2번째 부터 위젯에서 initState와 dispose를 호출하지 않는다.

즉, 위젯을 랜더링 하지 않는다는 것이다.

 

해결을 위한 과정

해외 포럼에서는 해당 이슈가 widget dispose not called라고 되어있는데 답을 보면

navigator.pop()과 같이 navigator을 사용하여 위젯을 전환하는 경우에는 이러한 이슈가 발생하지 않는다고 되어있다.

하지만 나는 아래의 코드와 같이 navigator를 사용하는 것이 아니었기에 근본적인 해결책이 될 순 없었다.

List<Widget> list = [
	CustomWidget('1'),
	CustomWidget('2')
];
    
@override
Widget build(BuildContext context){
	return ...
    ...
    
    
   children : [
		list[index],
		RaisedButton(child : Text('화면 변경'),
		onPressd: (){	
			setState((){
			index == 0 ? index = 1 : index = 0;
			});
		}                   
}

 

자세한 사유를 찾아보니 플러터에서 여러 위젯들을 동일한 컴포넌트로 인식해 새롭게 랜더링을 하지 않는 것이었다.

이는 최적화를 위한 것으로 플러터 뿐만 아니라 다른 프레임워크에서도 발생하는 문제라고 한다.

 

이슈 해결

각 위젯들의 Key를 설정해주면 동일한 컴포넌트로 인식하지 않아 새롭게 랜더링을 한다.

 

방법 1.

위젯을 Container 등으로 감싸고 key에 UniqueKey()를 부여한다.

              Container(
                key: UniqueKey(),
                child: CustomWidget('1'),)

 

방법2.

클래스 생성자에서 Key에 UniqueKey()를 부여한다.

CustomWidget(this.text)
      : super(key: UniqueKey());

혹은 항상 UniqueKey()가 필요한 것이 아니라면 인수로 key를 받을 수도 있다.

  CustomWidget(this.text,
      {Key key})
      : super(key: key);