Flutter에서는 UI를 설계할 때 Spacer와 Expanded를 사용하여 여백을 조절합니다. 두 위젯은 비슷해 보이지만, 실제로는 사용 방법과 동작 방식에 차이가 있습니다. 이 블로그 게시물에서는 Spacer와 Expanded 위젯의 차이에 대해 설명하고, 각각의 사용 사례와 장단점에 대해 알아보겠습니다.

Spacer 위젯

Spacer 위젯은 사용 가능한 공간을 동등하게 분할하여 자식 위젯 사이에 공간을 만듭니다. 예를 들어, Spacer를 사용하여 두 개의 위젯을 가로로 정렬하면 화면의 여백이 동일하게 분할됩니다. Spacer는 유연하게 여백을 조절하여 자식 위젯 사이의 간격을 균일하게 유지합니다.

Row(
  children: <Widget>[
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

Expanded 위젯

Expanded 위젯은 자식 위젯이 부모 위젯의 사용 가능한 공간을 모두 차지할 수 있도록 확장합니다. Column 또는 Row 안에 자식 위젯으로 배치하여, Expanded를 사용하는 자식 위젯은 남아있는 공간을 모두 차지합니다. 이는 주로 디자인을 위해 여백을 채우거나, 자식 위젯이 부모 위젯 내에서 더 큰 공간을 차지하도록 할 때 유용합니다.

Column(
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.blue),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
  ],
)

결론

Spacer 위젯은 공간을 동등하게 분할하여 나눠주고, Expanded 위젯은 남아있는 공간을 채우거나 모두 차지하도록 하는 데 사용됩니다. 따라서 이 두 위젯을 올바르게 활용하여 화면의 레이아웃을 조절할 수 있습니다.

위젯의 특성을 이해하고, 적절하게 활용하여 UI를 설계하는 것이 중요합니다.

더 많은 정보는 Flutter 공식 문서에서 확인하실 수 있습니다.