Flutter에서 Row 위젯을 사용하여 여러 위젯을 가로로 배열할 수 있습니다. 하지만 기본적으로 Row 위젯은 자식 위젯 간에 어떠한 여백도 제공하지 않습니다. 이번 글에서는 Row 위젯에서 자식 위젯 간에 여백을 설정하는 방법에 대해 알아보겠습니다.

1. SizedBox 사용하기

SizedBox 위젯을 사용하여 자식 위젯 간의 여백을 설정할 수 있습니다.

Row(
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
    SizedBox(width: 10.0),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  ],
)

위의 예제에서는 SizedBox 위젯을 사용하여 첫 번째 Container 위젯과 두 번째 Container 위젯 사이에 10.0의 가로 여백을 설정했습니다.

2. Spacer 사용하기

Spacer 위젯은 자동으로 남는 공간을 채워주는 역할을 합니다. 이를 사용하여 자식 위젯 간에 균일한 여백을 설정할 수 있습니다.

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

위의 예제에서는 Spacer 위젯을 사용하여 첫 번째 Container 위젯과 두 번째 Container 위젯 사이에 균일한 가로 여백을 설정했습니다.

3. MainAxisAlignment 사용하기

Row 위젯의 mainAxisAlignment 속성을 사용하여 자식 위젯의 정렬 방식을 설정할 수 있습니다. 이를 이용하여 자식 위젯 간의 여백을 조정할 수 있습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  ],
)

위의 예제에서는 mainAxisAlignment 속성을 MainAxisAlignment.spaceBetween로 설정하여 첫 번째 Container 위젯과 두 번째 Container 위젯을 가장 왼쪽과 가장 오른쪽에 배치하고 중간에 자동으로 공간을 채웠습니다.

Reference

• Flutter - Row 클래스 문서