<Flutter> 위젯을 만들 때 자주 발생하는 에러와 해결 방법

Flutter로 개발할 때 다양한 위젯 관련 에러에 매일매일... 직면할 수 있다.

 

이 블로그 글에서는 주로 마주치는 문제와 이를 해결하는 방법에 대해 설명합니다. 특히, 이전에 관심을 보였던 높이(height)와 너비(width)와 관련된 에러들에 초점을 맞춥니다.

1. RenderFlex Overflow 에러

RenderFlex Overflow 에러는 개발자가 위젯을 사용하면서 가장 자주 마주치는 문제 중 하나입니다. 이 에러는 Column, Row 또는 Flex 위젯 내부의 자식 위젯이 상위 위젯의 크기를 넘어가는 경우 발생합니다. 높이(height)와 너비(width) 속성을 다룰 때 흔히 발생합니다.

해결책: RenderFlex Overflow 에러를 수정하려면, 위젯을 Expanded 또는 Flexible 위젯으로 감싸주세요:

Column(
  children: [
    Expanded(child: Container(/*...*/),),
    Container(/*...*/),
  ],
)

위의 예제에서 Column 내부에 있는 첫 번째 컨테이너를 Expanded 위젯으로 감싸 Overflow 에러를 방지합니다.

2. Box Constraints Error

Box Constraints Error는 위젯의 제약조건이 위반될 때 발생하는 경우입니다 — 예를 들어, 최소 또는 최대의 높이(height)와 너비(width) 제약조건을 넘어갈 때 발생합니다. SizedBox나 Container의 높이와 너비가 필요한 최소치보다 낮거나 허용된 최대치보다 높을 때 발생합니다.

해결책: Box Constraints Error를 해결하려면 위젯의 크기를 제약조건에 맞게..:

SizedBox(
 : double.infinity, // double.infinity 또는 적절한 값을 사용하세요.
  height: 50,
  /*...*/
)

너비를 double.infinity로 설정하면 SizedBox가 가용 공간에 따라 너비를 조정할 수 있으며 제약조건을 위반하지 않습니다.

3. CrossAxisAlignment 사용 오류
   CrossAxisAlignment 사용 오류는 CrossAxisAlignment, CrossAxisAlignment.start, CrossAxisAlignment.end, CrossAxisAlignment.stretch를 BoxDecoration에서 잘못 사용할 때 발생합니다. CrossAxisAlignment 속성은 Column이나 Row의 항목을 정렬하는데 사용되며 스타일링에는 적합하지 않습니다.

해결책: 이를 해결하려면 MainAxisAlignment와 CrossAxisAlignment를 함께 사용하여 Row 또는 Column 내부의 children을 정렬하세요:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    /*...*/
  ],
)

Column 위젯에서 MainAxisAlignment와 CrossAxisAlignment 속성을 정확하게 사용하면 Column의 children이 정의된 값에 따라 정렬됩니다.

4. 'child'가 null입니다

'Child'가 null인 에러는 위젯의 child 속성에 null 값을 전달할 때 발생합니다. 대부분의 위젯에서는 null 값이 허용되지 않습니다.

해결책: 위젯의 자식(child) 속성이 null 값으로 할당되지 않도록 확인하세요. null 값이 필요한 경우, 코드를 수정하여 에러를..막읍시다...

Widget _buildChild() {
  if ( someCondition ) {
    return Text('Hello, World!');
  } else {
    return SizedBox.shrink(); // null 대신 빈 SizedBox 반환
  }
}

Container(
  child: _buildChild(),
)

위의 예에서 someCondition이 거짓일 경우 빈 SizedBox를 반환함으로써 Containter의 child 속성에 null 값을 전달하지 않습니다.

5. MainAxisAlignment 및 CrossAxisAlignment가 제대로 적용되지 않은 경우

MainAxisAlignment 및 CrossAxisAlignment 속성이(Column 및 Row와 같은) 위젯에 제대로 적용되지 않는 경우가 있습니다. MainAxisAlignment.start, MainAxisAlignment.end, CrossAxisAlignment.start, CrossAxisAlignment.end가 예상대로 작동하지 않을 수 있습니다.

해결책: 이 문제는 부모 Container 위젯에 Column 또는 Row 위젯을 둘러싸고, 높이(height)과 너비(width) 속성을 설정하여 해결할 수 있습니다:

Container(
  width: double.infinity,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      /*...*/
    ],
  ),
)

위의 예제에서는 Column 위젯을 너비가double.infinity인 Container 내에 배치했습니다. 이 구성을 사용하면 MainAxisAlignment와 CrossAxisAlignment 속성이 정확하게 적용됩니다.

 

결론적으로,

Flutter에서 나도 매일 마주치고 있는 것이 이런 에러들이다. 익숙해질만한대로 아직이다..