Flutter 앱을 개발하다보면 UI 요소들의 위치와 크기를 조절해야 하는 경우가 많습니다. Spacer 위젯은 이러한 상황에서 유용하게 활용될 수 있습니다. 이번 포스트에서는 Spacer 위젯을 사용하여 위젯의 가로와 세로 크기를 조절하는 방법에 대해 알아보겠습니다.

Spacer 위젯 소개

Spacer 위젯은 주어진 여백을 확장해서 사용 가능한 모든 공간을 차지합니다. Row나 Column과 같은 Flex 위젯 안에서 자식 위젯들 사이의 여백을 확장하는 데 사용됩니다. 이를 통해 자식 위젯들 간의 공간을 균등하게 분배하거나, 부족한 공간을 자동으로 채울 수 있습니다.

Spacer 위젯 사용하기

아래는 Spacer 위젯을 사용하여 가로 방향으로 공간을 균등하게 분배하는 예시 코드입니다.

Row(
  children: <Widget>[
    Container(
      width: 100,
      height: 50,
      color: Colors.blue,
    ),
    Spacer(),
    Container(
      width: 100,
      height: 50,
      color: Colors.green,
    ),
    Spacer(),
    Container(
      width: 100,
      height: 50,
      color: Colors.red,
    ),
  ],
)

위 예시 코드에서 Spacer 위젯은 각 Container 위젯 사이의 공간을 균등하게 분배하여 화면에 표시됩니다.

세로 방향으로 Spacer를 사용하려면 Column 위젯에 Spacer를 추가하여 비슷한 방법으로 사용할 수 있습니다.

마치며

이번 포스트에서는 Flutter의 Spacer 위젯을 사용하여 위젯의 가로와 세로 크기를 조절하는 방법에 대해 알아보았습니다. Spacer 위젯을 잘 활용하면 UI 요소들의 간격을 균등하게 분배하거나 공간을 채우는 데 유용하게 사용할 수 있습니다. Flutter 애플리케이션을 개발하는 과정에서 Spacer 위젯을 적절히 활용하여 UI를 보다 효율적으로 구성해보세요.