트러블 슈팅 - Container 위젯 내에 children 속성 사용 오류

 

🌐 Flutter 트러블슈팅: Container 위젯 내 children 속성 오류

✅ 발생 상황

기존 코드에 날씨 이미지가 들어갈 구역을 파란색 테두리를 가진 Container 위젯으로 감싸려고 했지만 코드 오류가 발생했습니다.

---

🔍 원인 분석

Container는 Flutter에서 스타일링(예: padding, margin, border, decoration)을 위해 자주 사용하는 위젯입니다. 그러나 이 위젯은 단 하나의 자식 위젯(child)만 가질 수 있습니다.

문제는 다음과 같은 방식으로 여러 자식 위젯을 Container의 children 속성에 직접 배치하려 했던 코드에서 발생했습니다:

Container(
  children: [ // ❌ 오류 발생
    Text("현재 날씨"),
    _buildPlaceholderBox("현재 날씨"),
    ...
  ],
)

하지만 children 속성은 Column, Row, ListView와 같이 복수의 자식 위젯을 관리하는 레이아웃 위젯에서만 사용할 수 있습니다.
즉, Container는 children을 인식하지 못하고, 그 결과로 위젯 렌더링이 실패한 것입니다.

---

🔧 해결 방법

여러 위젯을 Container 내부에 배치하고 싶다면, Container의 child에 Column과 같은 레이아웃 위젯을 감싸주는 방식이 가장 일반적입니다.

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: Column( // ✅ 레이아웃 위젯으로 감싸기
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text("현재 날씨"),
      _buildPlaceholderBox("현재 날씨"),
      Text("하루 기온 변화"),
      _buildPlaceholderBox("하루 기온 변화"),
      SizedBox(height: 30),
      Text("일주일 날씨"),
      _buildPlaceholderBox("일주일 날씨"),
    ],
  ),
)

실제 코드에서는 Container를 또 다른 Column으로 감싼 구조도 사용되었습니다:

child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const SizedBox(height: 8),
    Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
      ),
      child: Column(
        children: [
          Text("현재 날씨"),
          _buildPlaceholderBox("현재 날씨"),
          Text("하루 기온 변화"),
          _buildPlaceholderBox("하루 기온 변화"),
          const SizedBox(height: 30),
          _buildWeeklyForecast(),
          Text("일주일 날씨"),
          _buildPlaceholderBox("일주일 날씨"),
        ],
      ),
    ),
  ],
),

---

📝 결론

Container 위젯은 단일 자식만 받을 수 있기 때문에, 여러 자식 위젯을 넣고자 할 경우 Column, Row, Stack 등의 레이아웃 위젯을 반드시 함께 사용해야 합니다.
이번 문제는 이러한 구조적 이해 부족으로 발생한 실수였으며, 레이아웃 위젯으로 감싸주는 방식으로 손쉽게 해결할 수 있었습니다.

---

📌 관련 팁

• 단일 위젯만 있을 경우에는 Container(child: 위젯) 사용 가능
• 여러 위젯을 넣고 싶을 땐 Column 혹은 Row를 꼭 사용
• 레이아웃이 복잡해질수록 Padding, SizedBox, Spacer 등을 조합하여 정돈된 구조를 설계하는 것이 중요