코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다!

[코드팩토리 디스코드]
https://bit.ly/3HzRzUM

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

269. TabBar 스타일링하기

[TabBar Widget] 이론 섹션의 269번 강의 영상에서

약 9:46부터 나오는 PreferredSize의 child 속성을 일반 위젯인 Row 로 wrapping한 경우에요.

문제의 에러 코드

  Widget build(BuildContext context) {
    return DefaultTabController(
      length: TABS.length,
      child: Scaffold(
        backgroundColor: Colors.pink[50],
        appBar: AppBar(
          title: Text('Basic AppBar'),
          backgroundColor: Colors.green[300],
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(80),
            child: TabBar(
            // 내부 사항 생략
            ),
          ),
        ),
        body: TabBarView(
          children: TABS.map((e) => Center(child: Icon(e.icon))).toList(),
        ),
      ),
    );
  }

위 코드는 그대로 실행이 잘 되지만 이 상태에서 TabBar에 커서를 두고 Context Action을 실행해서 Row로 감싸기를 하면 이런 에러가 떠요.

child: Row(
  children: [
    child: TabBar(
      // 내부 사항 생략
    ),
  ],
),

RenderFlex children have non-zero flex but incoming width constraints are unbounded.

The affected RenderFlex is: _TabLabelBarRenderer#be04c relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: <none> (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
  spacing: 0.0

The creator information is set to: _TabLabelBar ← IconTheme ← Builder ← DefaultTextStyle ← _TabStyle ← CustomPaint ← Semantics ← MediaQuery ← TabBar ← Row ← PreferredSize ← Column ← ⋯
The nearest ancestor providing an unbounded width constraint is: RenderFlex#01f78 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

The relevant error-causing widget was: 
  TabBar TabBar:file:{Project Root Dir}/lib/screen/basic_appbar_tabbar_screen.dart:22:17

에러 스택 따라가다 보니 해결됨

Row로 감싸진 TabBar를 다시 Expanded로 감싸면 해결이 돼요. 그래도 간헐적으로 픽셀 오버플로우 에러가 나기는 하는데 어쨌든 사이즈 미확인 문제는 해결된 것 같아요.

child: Row(
  children: [
    Expanded(
      child: TabBar(
        // 내부 사항 생략
      ),
    ),
  ],
),

근데 아직 왜 TabBar에 사이즈 제한을 걸지 않으면 Row로 감쌀 수 없는지 잘 모르겠어요. 자세히 알려주시면 감사합니다.