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

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

[코드팩토리 디스코드]
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로 감쌀 수 없는지 잘 모르겠어요. 자세히 알려주시면 감사합니다.

Answer 3

0

codefactory

2025-09-30T22:50:42.170Z

안녕하세요.

강의 코드 한번 더 확인 부탁드립니다.

에러 나는게 정상 상황입니다.

감사합니다!

0

Ryu

2025-11-20T09:00:05.049Z

선생님, 제 답변이 많이 늦어서 죄송합니다.
오늘 몇 가지 질문만 추가로 드리고 싶습니다.

 

---

1. 우선 깃헙 강의 코드는 다시 확인했습니다.

제가 보기에 가장 중요한 차이점은 PreferredSize와 Row로 감싸인 Tabbar는 isScrollable 속성 값이 반드시 true여야 하는 것 같습니다.

현재 AppBar 부분을 이렇게 두니까 더 이상 에러는 발생하지 않았습니다.

appBar: AppBar(
  backgroundColor: Colors.blue[100],
  title: Text('Basic AppBar TabBar Screen'),
  centerTitle: true,

  bottom:
      /// TabBar 외 일반 위젯으로 커스텀하고 싶을 때 유용
      PreferredSize(
        preferredSize: Size.fromHeight(120),
        child: Row(
          children: [
            TabBar(
              isScrollable: true,
              tabs: TABS
                  .map<Widget>(
                    (e) => Tab(
                      icon: Icon(e.icon),
                      child: Text(e.label),
                    ),
                  )
                  .toList(),
            ),
          ],
        ),
      ),
),

 

그러나 제가 맞게 고친 건지는 여전히 모르겠습니다. TabBar에서 보이는 저 속성의 차이와 실제 위젯의 사이징이 어떤 연관을 가지는지 아직 이해하지 못했습니다.

---

2. 그리고 위 동일한 코드의 결과로 나타난 결과 화면이 강의에서 보여진 것과는 다소 차이가 있습니다.

강의에서는 Row의 MainAxisAlignment 속성 기본 값으로 인해 탭바가 왼쪽에 붙어서 정렬된다고 하셨는데, 현재 제 PC의 에뮬레이터 화면은 Row의 정렬 속성과 상관 없이 오히려 중앙에서 약간 오른쪽으로 치우쳐 있습니다. MainAxisAlignment.end 로 바꾸면 아예 오른쪽에 붙기는 합니다. 혹시 제 코드에서 레이아웃이 그렇게 나올 수 밖에 없는 걸까요?

---

시간적 여유가 되신다면 해결 답변 꼭 부탁드리겠습니다.. 감사합니다.

0

Ryu

2025-09-28T12:51:08.262Z

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

0

communityai8509

2025-09-28T12:01:37.662Z

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

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

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

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

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