[dart] RenderBox was not laid out / Failed assertion: line 2164 pos 12: 'hasSize' 에러

1. 개요

검색창을 만드는 도중 다음과 같은 에러가 발생했다.

RenderBox was not laid out: RenderTapRegion#658eb relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2164 pos 12: 'hasSize'

코드는 다음과 같다.

child: Row(
    children: [
      TextField(
        decoration: InputDecoration(
          hintText: '영화 제목을 검색해주세요.',
        ),
      ),
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          print('검색 버튼이 눌렸습니다.');
        },
      ),
    ],
),

2. 원인

에러가 발생하는 이유는 Row 위젯 내에서 TextField가 가로로 필요한 공간을 모두 차지하려고 하기 때문이다. Row는 자식 위젯이 무한한 너비를 가질 수 없도록 제한하기 때문에 TextField가 어떻게 크기를 결정할지 명확하게 정의해야 한다고 함...

3. 해결

body: Center(
    child: Padding(
      padding: const EdgeInsets.all(18.0),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: '영화 제목을 검색해주세요.',
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('검색 버튼이 눌렸습니다.');
            },
          ),
        ],
      ),
    ),
),

Expanded: TextField를 Expanded로 감싸서 Row 내에서 남은 공간을 차지하도록 했더니 해결되었다.