[Flutter] 어? 자식 Widget이 렌더링이 안돼요.

오늘, 작업을 하던중 외부로 빼놓은 StatefulWidget을 사용함에 있어서

렌더링이 안되는 현상이 발견되었습니다.

저의 경우는 아래와 같습니다.

부모 Widget (StatefulWidget), 부모창에서 그려질 여러개의 자식 Widget (StatefulWidget)

 

이 경우에, 자식 Widget을 StreamBuilder를 통해 호출될때 렌더링이 제대로 안되고 꼬이는데

아래와 같이 해결하실 수 있습니다.

 

[자식 위젯]

class ChatMsgBalloon extends StatefulWidget {
  @override
  ChatMsgBalloonState createState() => ChatMsgBalloonState();

  ChatMsgBalloon({
    required bool isMe,
    required String msg,
    Key? key
  }) : isMe = isMe,
  msg = msg,
  super(key: key);

  bool isMe;
  String msg;

}

자식 Widget엔 필요한 값 및 키를 선언해주도록 합니다.

 

[부모 위젯]

// StatefulWidget으로 따로 사용하게 될때, Key값을 제공해주지 않으면 렌더링 버그가 있음이 발견됨.
Widget _buildMsgLine(msg, isMe) {
  return ChatMsgBalloon(isMe: isMe, msg: msg, key: Key('${DateTime.now().hashCode}+$isMe'),);
}

부모 위젯에서는, 자식의 키값이 겹치지 않도록 키값을 넘겨주어야 합니다.

 

평소엔 무심코 지나가던 Key

의외의 복병이 될 수도 있더군요.