Expand 위젯 에러 : RenderFlex children have non-zero flex but incoming height constraints are unbounded.

 

 

서론

 

 코드를 작성하다 보면 Expand를 써서 지정된 부분의 화면을 꽉차게 만들고 싶을 때가 있다.

 그런데 이게 간혹 보면 Column이나 Row위젯 안에 넣을 때 에러가 자주 나기 시작함....

 

에러 내용 

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

 

 Expand 위젯을 쓸 때 나오는 위의 에러에 대해서 정리를 좀 해보고자 한다.

 

본문 

 

 에러가 나는 코드 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.5,
            color: Colors.amber,
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Expanded(child: Column(
                    children: [
                      Text("Ww"),
                      Text("www")
                    ],
                  ))
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

 

 

 Expand 위젯은 정해진 공간을 꽉 채우는 역할을 하는 위젯이다. 

 여기서 문제는 꽉 채운다는 것이다... 

 

 Column이나 Row 같은 위젯은 기본적으로 크기가 무제한이다. 

 Column에는 세로 길이 제한이 Row에는 가로 길이 제한이 없다!  

 근데 Expand 요놈은 부모 크기만큼 꽉 채우려고 한다.

 

 즉 여기서 부모 위젯이 무제한 크기를 자랑하고 있는데 자식이 여길 꽉 채운다면?? 화면이 터져 나간다는 소리다!!

 

제약 조건	Column	Row	Expand
가로	부모 너비 만큼	무한한 너비	부모의 너비 만큼
세로	무한한 길이	부모 길이 만큼	부모의 길이 만큼

 

 그래서 보통 Column 이나 Row를 쓸 때는 Scaffold 같은 위젯으로 감싸게 되는데 해당 Scaffold가 가지는 너비와 길이를 제약조건으로 사용한다고 보면 된다. 그리고 이 때 Column은 무한한 세로 길이 Row는 무한한 너비를 가지게 됨 이를 제어 하기 위해서는 Container 등으로 길이가 지정된 위젯으로 감싸주면 된다 .

 

참고 사항 mainAxisSize

MainAxisSize.min : 크기만큼 차지 
MainAxisSize.max : 남은 영역을 모두 사용 

 

 수정한 코드 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.5,
            color: Colors.amber,
            child: SingleChildScrollView(
              child: Column(
                  children: List.generate(
                      100,
                          (index) => Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 0.5,
                            color: Colors.black,
                          ),
                        ),
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.1,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: const [
                            Text("ttt"),
                          ],
                        ),
                      ))
              ),
            ),
          )
        ],
      ),
    );
  }
}

 

 시뮬레이터 화면 

 

 

 

 

 

참고

 

https://happyhaelee.tistory.com/46

flutter listview builder constraintsError - Expanded vs Flexible

https://velog.io/@vrdhan212/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4

[플러터] 제약 조건