[Flutter] RenderFlex children have non-zero flex but incoming height constraints are unbounded

"RenderFlex children have non-zero flex but incoming height constraints are unbounded"

 

이 에러는 대체 언제 나는 것일까?

자주 마주친 에러였지만 늘 그때마다 뭔가 시도해봤고 잘 되었고 넘어가고.. 그랬었다.

 

이제는 이 에러의 원인을 확실히 알아둘 때라고 느꼈다

또 다시 마주칠 때는 헤매이는 시간 없이, 수정 시간을 줄이기 위해. 한 번 정리할 시간이 필요하다고 느꼈다

 

 

 

 

이 에러의 메세지를 직관적으로 해석해보면 높이 제약이 제한되어 있지 않다고 한다.

예시를 통해 알아보자

 

Screen
  → Column
    → Column
      → Expanded → ERROR

 

보통 위와 같은 위젯 트리일 때 이 에러가 발생한다

 

 

 

위의 위젯 트리를 좀 더 자세히 알아보면 다음과 같다

 

Screen
  ↓ constraint ↓ (Device Screen)
  Column
    Text_A (fixed height: no constraint needed) → OK
    Column 
      ↓ constraint ↓ (unbounded)
      Text_B (fixed height) → OK
      Expanded: calc. height = unbounded - Text_B → ERROR

 

첫 번째 Column 은 Device Screen 으로부터 constraints 를 얻는다.

(이것은 Scaffold 를 통해 제공된다)

 

두번째 Column 은 unbounded space 를 갖게 된다 (무제한 공간 이라는 뜻)

따라서 Expanded 위젯을 사용하면 (무제한 공간 - Text_B 사이즈) 이므로 계산을 할 수 없어서 에러가 나는 것이다.

 

  unbounded - Text_B = unbounded (error)

 

 

 

 

 

왜 중첩된 Column 은 unbounded 되는 것일까

 

Column 의 설명을 찾아보면 다음과 같다.

 

/// 1. Layout each child with a null or zero flex factor (e.g., those that are not
///    [Expanded]) with unbounded vertical constraints

 

Column 은 각각의 child 가 무제한 수직 constraints 를 갖는 null or zero flex factor 를 갖고 있다. (null or zero flex factor 란, 쉽게 말해서 Expanded 가 아니라는 것이다)

 

그래서 위의 예제의 중첩된 두번째 Column 는 zero flex factor 이다 (= 무제한 수직)

 

 

 

여기서 헷갈리면 안될 것은 Column 을 찾아보면 Flex 를 extends 하고 있는데, Flex 는 flex field, flex factor 가 아니다.

오직 Flexible class, 그리고 그의 children 들이 flex factor 요소이다

 

 

class Column extends Flex

 

Flex 의 정의는 다음과 같다

A widget that displays its children in a one-dimensional array.

자식을 일차원 배열로 표시하는 위젯일 뿐이다.

 

 

그래서 두번째 Column 이 무제한 constraints 를 갖게 되었고, Text_B widget 은 고정된 높이를 갖고 있고 Expaneded 는 그럼 

unbounded space - Text_B widget 를 계산하면서 에러를 발생하게 된다

 

 

 

 

 

에러를 어떻게 해결해야 할까?

예시와 함께 알아보자

 

NOT OK

 

/// Unbounded constraint: NOT OK
class RenderFlexUnboundedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Column(
            children: [
              Text('Column > Column > Text_A'),
              Expanded(
                  child: Text('Column > Column > Expanded_A')) // explosions
            ],
          )
        ],
      ),
    );
  }
}

 

위는 에러가 발생하는 예시이다

 

 

 

OK

 

/// Constraints provided: OK
class RenderFlexPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('Column > Text_A'),
          Expanded( // Expanded_A
            child: Column(
              children: [
                Text('Column > Expanded_A > Column > Text_B'),
                Expanded( // Expanded_B
                    child: Text('Column > Expanded_A > Column > Expanded_B'))
              ],
            ),
          )
        ],
      ),
    );
  }
}

 

이렇게 수정하면 에러가 나지 않는다

 

 

 

 

 

https://stackoverflow.com/questions/57803737/flutter-renderflex-children-have-non-zero-flex-but-incoming-height-constraints

Flutter: "RenderFlex children have non-zero flex but incoming height constraints are unbounded"