(어찌저찌 해결되긴 하는데..) AppBar의 bottom에 PreferredSize 적용 시 기존 TabBar는 잘 되는데 Row로 감싸면 에러가 떠요.

작성

수정됨

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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로 감쌀 수 없는지 잘 모르겠어요. 자세히 알려주시면 감사합니다.

flutter 클론코딩 tabbar appbar

답변 2

Ryu

질문자

강의 영상에서는 동일한 코드에서 전혀 에러가 발생하지 않는 걸로 보아, 아마도 버전이 바뀌면서 생기는 문제일지도 모르겠네요..

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
Ryu님, TabBar를 Row로 감쌀 때 발생하는 문제에 대해서 설명드리겠습니다.

Flutter에서 Row 위젯은 기본적으로 자식 위젯의 크기를 자식 위젯이 스스로 결정하게 만듭니다. 이와 같은 경우, 즉 Row 안에 들어가는 자식들이 유동적인 크기를 갖도록 한정되는 대신, 부모로부터 크기 제약 조건을 받지 않는 경우, Row의 자식인 TabBar와 같은 위젯들은 무한대로 크기를 사용할 수 있다고 착각하여 에러가 발생할 수 있습니다. 이는 Flutter의 레이아웃 방식에 의해 발생하는 것으로, Row는 자식들에게 명시적인 크기를 제공하지 않기 때문입니다.

이러한 상황에서 Expanded를 사용한다면, Row 내부에서 자식이 사용 가능한 남은 크기를 모두 차지할 수 있도록 강제합니다. 그래서 TabBar와 같은 위젯은 자신이 가질 수 있는 정확한 크기를 받아서, 크기 제약 조건을 구체적으로 따르게 됩니다. 결과적으로, Row는 화면의 너비를 정확히 알기 때문에, 자식이 그에 맞춰 배치될 수 있는 정확한 크기를 갖게 됩니다.

간헐적인 픽셀 오버플로우 오류는 여전히 다른 원인이 있을 수 있으며, MainAxisAlignment와 같은 추가적인 레이아웃 속성을 조정하여 해결할 수 있습니다.

해당 에러에 대한 원인과 해결 방안에 대한 공식 문서는 여기에서 읽어보시면 도움이 될 것입니다.
추가적인 질문이나 오류가 있다면 언제든지 알려주세요!

인프런 커뮤니티 질문&답변

(어찌저찌 해결되긴 하는데..) AppBar의 bottom에 PreferredSize 적용 시 기존 TabBar는 잘 되는데 Row로 감싸면 에러가 떠요.

269. TabBar 스타일링하기

문제의 에러 코드

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