Flutter에서 Spacer는 유용한 도구로, 위젯 간의 여백이나 비율을 조절하는 데 활용됩니다. Spacer 위젯을 사용하여 다양한 화면 크기와 방향에 대해 일관된 레이아웃을 구현할 수 있습니다.

Spacer란 무엇인가?

Spacer는 주어진 공간을 자동으로 채워주는 Flutter 위젯입니다. Column 또는 Row 내에서 Spacer를 추가하여, 남아있는 여백을 균일하게 분배하거나 두 위젯 간의 비율을 조절할 수 있습니다.

Spacer 사용 예시

다음은 Spacer를 사용하여 Row 내의 두 위젯 사이에 공간을 할당하는 예시입니다.

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

위 예시에서 Spacer 위젯은 파란색과 초록색 컨테이너 사이의 여백을 균일하게 분배하게 됩니다.

Spacer의 속성

Spacer는 flex 속성을 가지고 있습니다. 이 값을 설정하여 여백을 어떻게 분배할지 결정할 수 있습니다. 기본적으로 Spacer는 flex: 1을 갖고 있으며, 이는 자신을 제외한 다른 위젯에 비해 1:1의 비율로 공간을 할당한다는 것을 의미합니다.

Spacer(
  flex: 2,
)

위의 예제에서 Spacer는 flex: 2를 갖게 되어 자신을 제외한 다른 위젯에 비해 2:1의 비율로 공간을 할당하게 됩니다.

Spacer를 적절히 활용하면 다양한 화면 크기와 방향에서 일관된 레이아웃을 유지할 수 있으며, UI 디자인을 보다 유연하게 조정할 수 있습니다.

결론

Spacer는 Flutter에서 간단하고 효과적으로 여백을 조절하거나 위젯 간의 비율을 조절하는 데 사용됩니다. 이를 통해 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있습니다.

위젯 간의 여백이나 비율을 조절해야 하는 경우, Spacer를 활용해보시기 바랍니다.