[FLUTTER] COLUMN 제약조건(UNBOUNDED HEIGHT)

간혹 가다 Column을 중첩해서 쓰게 될 일이 있는데 나는 body부분에 tab bar를 쓰기 위해서 column을 중첩해서 사용하였다

헌데 계속

renderflex children have non-zero flex but incoming height constraints are unbounded.

아니면

horizontal viewport was given unbounded height와 같은 오류가 난다.

 

직관적으로 봤을때 제한되지 않는 크기 때문에 문제가 된다는 느낌을 받는다.

 

오류가 난 이유는 column은 세로축으로 무제한 확장하며 부모 위젯이 있는 경우에는 부모 위젯의 height에 높이가 맞춰진다.

 

하지만 column child에 column이 들어가면 부모의 height이 infinity기 때문에 자식 column의 height도 unbounded가 돼버린다.

 

따라서 자식 column의 height를 정해주던가, 자식 column을 expanded로 감싸주어야 한다.

 body: Container(
          width: width,
          height: height,
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.only(left: 10, right: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 40,),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Profile_Image(AssetImage('assets/images/recommend_page/Exhibitions/nacho.jpeg')),
                        Spacer(),
                        Container(
                          padding: EdgeInsets.only(left: 10, right: 10, top: 6, bottom: 6),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              color: tag_color
                          ),
                          child: Row(
                            children: [
                              CircleIcon(
                                icon: Icons.question_mark,
                                iconsize: 10,
                                backgroundcolor: Colors.grey,
                                width: 12,
                                height: 12,
                              ),
                              SizedBox(width: 5,),
                              Text(
                                '나의 성향 배지',
                                style: TextStyle(
                                  color: Colors.grey.shade600,
                                  fontSize: 14
                                ),
                              )
                            ],
                          )
                        ),
                        SizedBox(width: 10,),
                        Container(
                            padding: EdgeInsets.only(left: 10, right: 10, top: 6, bottom: 6),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(30),
                                color: Color(0xffebfbe6)
                            ),
                            child: Row(
                              children: [

                                Text(
                                  '36.9',
                                  style: TextStyle(
                                      color: Color(0xff77e357),
                                      fontSize: 14
                                  ),
                                ),
                                SizedBox(width: 5,),
                                CircleIcon(
                                  icon: Icons.arrow_forward_ios,
                                  iconsize: 8,
                                  backgroundcolor: Color(0xff77e357),
                                  width: 12,
                                  height: 12,
                                ),
                              ],
                            )
                        ),
                      ],
                    ),
                    SizedBox(height: 20,),
                    Text(
                      '이름',
                      style: TextStyle(
                          fontSize: maintitle,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                    SizedBox(height: 20,),
                    Text(
                      '자기소개',
                      style: TextStyle(
                      ),
                    ),
                    SizedBox(height: 30,),
                    Wrap(
                      runSpacing: 10,
                      children: List.generate(10, (index) {
                        if(index < 9)
                          return KeyWordTag_Container(taglist![index]);
                        else
                          return RoundedBorderContainer(
                            padding: EdgeInsets.only(left:8, right:8, top: 3, bottom: 3),
                            bordercolor: Colors.grey,
                            widget: Text(
                              '+${taglist!.length - 9}',
                              style: TextStyle(
                                color: Colors.grey,
                              ),
                            ),
                          );
                      })
                    ),
                    SizedBox(height: 30,),
                    Row(
                      children: [
                        TextNum(),
                        Spacer(),
                        RoundedBorderContainer(
                          padding: EdgeInsets.only(left:8, right:8, top: 3, bottom: 3),
                          bordercolor: Colors.grey,
                          widget: Row(
                            children: [
                              Icon(Icons.add_circle, color: Colors.black, size: 20,),
                              SizedBox(width: 5,),
                              Text(
                                '글쓰기',
                                style: TextStyle(
                                  fontSize: 16
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(height: 30,),
              DefaultTabController(
                length: 3,
                child: Expanded(
                  child: Column(
                    children: [
                      PreferredSize(
                          preferredSize: Size.fromHeight(kToolbarHeight),
                          child: Align(
                            alignment: Alignment.center,
                            child: TabBar(
                              indicatorSize: TabBarIndicatorSize.tab,
                              labelColor: Colors.black,
                              unselectedLabelColor: Colors.grey,
                              indicatorPadding: EdgeInsets.only(left: 15, right: 15),
                              indicatorColor: Colors.black,
                              tabs: [
                                Tab(
                                    child: Text(
                                        '피드',
                                        style: TextStyle( fontSize: 18)
                                    )
                                ),
                                Tab(
                                    child: Text(
                                        '태그',
                                        style: TextStyle( fontSize: 18)
                                    )
                                ),
                                Tab(
                                    child: Text(
                                        '모임',
                                        style: TextStyle( fontSize: 18)
                                    )
                                ),
                              ],
                            ),
                          )
                      ),
                      Expanded(
                        child: TabBarView(
                          children: [
                            Feed(),
                            Tag(),
                            Meeting(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        )

 

내 코드에서는 굵게 칠한 부분인 column() -> column() -> tabbar & tabbarview 순서대로 위젯트리가 형성되어 있는데, tabbarview와 두 번째 column을 expanded로 감싸 오류를 해결하였다.