[Flutter] Incorrect use of ParentDataWidget 이슈

UI 구성을 하다보면 Incorrect use of ParentDataWidget 이슈가 발생할 때가 있다, 원인에 대해 알아보자

원인

Incorrect use of ParentDataWidget 오류는 위젯 트리에서 특정 위젯이 예상되는 부모(컨테이너)의 유형과 일치하지 않을 때 발생한다.
이 오류는 주로 Flexible, Expanded, Positioned 같은 위젯이 올바른 부모 위젯과 함께 사용되지 않았을 때 나타난다.
이러한 위젯들은 특별한 ParentData를 요구하는데,
이는 부모 위젯이 자식 위젯에 대한 추가적인 레이아웃 정보를 제공할 수 있게 한다.

기술적 원인

Expanded와 Flexible 위젯은 Row, Column, Flex와 같은 플렉스박스 모델을 사용하는 위젯 내부에서만 사용될 수 있다.
이 위젯들은 자식 위젯이 차지할 수 있는 공간을 동적으로 조정하는 데 사용되며, Flex 부모 없이 사용될 경우 오류가 발생한다.
Positioned 위젯은 Stack 위젯의 직접 자식으로만 사용될 수 있다. Positioned 위젯을 Stack 외부에 배치하면, 위치나 크기를 조정할 수 있는 Stack의 컨텍스트가 없기 때문에 오류가 발생한다.

해결 방법

Expanded와 Flexible 오류 해결:
이 위젯들을 반드시 Row, Column,
또는 Flex 위젯의 자식으로 만든다.
Positioned 오류 해결:
이 위젯을 Stack 위젯의 직접적인 자식으로 배치한다.

예시

잘못된 사용 예:

Container(
  child: Expanded( // 여기서 오류 발생
    child: Text('이 텍스트는 확장된다.'),
  ),
)

올바른 사용 예:

Row(
  children: [
    Expanded(
      child: Text('이 텍스트는 확장된다.'),
    ),
  ],
)

잘못된 사용 예 (Positioned):

Container(
  child: Positioned( // 여기서 오류 발생
    top: 0,
    left: 0,
    child: Text('이 텍스트는 위치가 지정된다.'),
  ),
)

올바른 사용 예 (Positioned):

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      child: Text('이 텍스트는 위치가 지정된다.'),
    ),
  ],
)

결론

Incorrect use of ParentDataWidget 오류는 위젯을 올바른 부모 위젯과 함께 사용하지 않았을 때 발생한다.
이를 해결하기 위해서는 문서나 API 가이드를 참고하여 각 위젯이 요구하는 부모 위젯의 유형을 확인하고, 코드를 그에 맞게 조정해야 한다.