Spacer 위젯은 자식 위젯 사이에 공간을 만들기 위해 사용됩니다. 이를 통해 화면을 수평 또는 수직으로 일정한 간격으로 분할할 수 있습니다. 이 문서에서는 Spacer 위젯을 사용하여 상하 및 좌우 간격을 지정하는 방법에 대해 알아보겠습니다.

Spacer를 사용하여 상하 간격 지정하기

다음은 Spacer를 사용하여 위젯의 상단과 하단에 간격을 지정하는 예제 코드입니다.

Column(
  children: <Widget>[
    Container(
      color: Colors.blue,
      height: 100,
    ),
    Spacer(),
    Container(
      color: Colors.green,
      height: 100,
    ),
  ],
)

위 예제 코드에서 Spacer 위젯은 두 개의 Container 위젯을 상하로 분리하는데 사용되었습니다. Spacer는 상단과 하단 간격을 균등하게 설정하여 위젯을 화면에 균등하게 배치합니다.

Spacer를 사용하여 좌우 간격 지정하기

다음은 Spacer를 사용하여 위젯의 좌우 간격을 지정하는 예제 코드입니다.

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

위 예제 코드에서 Spacer는 두 개의 Container 위젯을 좌우로 분리하는 데 사용되었습니다. Spacer는 좌우 간격을 균등하게 설정하여 위젯을 화면에 균등하게 배치합니다.

이제 위 예제를 참고하여 Spacer 위젯을 이용하여 원하는 상하 또는 좌우 간격을 지정할 수 있습니다!