Flutter에서 UI를 구성할 때 자주 사용되는 위젯 중 하나는 Row입니다. Row 위젯을 사용하면 가로로 배치된 항목을 쉽게 만들 수 있습니다. 그러나 때로는 Row 위젯 내에서 항목 사이의 간격을 조절해야 할 때가 있습니다.

이 글에서는 Row 위젯에서 간격을 조절하는 다양한 방법을 알아보겠습니다.

1. MainAxisAlignment를 사용하여 간격 조절하기

Row 위젯의 mainAxisAlignment 속성을 이용하면 항목들의 가로 정렬을 설정할 수 있습니다. 이 속성은 MainAxisAlignment 열거형을 사용하여 설정합니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

위의 예제에서는 spaceEvenly 값을 사용하여 항목들 사이의 간격을 고르게 조절합니다. 다른 가능한 값으로는 start, end, center, spaceBetween 등이 있습니다.

2. SizedBox를 사용하여 간격 조절하기

간격을 좀 더 세밀하게 조절하려면 SizedBox 위젯을 이용할 수 있습니다. SizedBox 위젯은 지정한 크기의 공간을 생성하는 데 사용됩니다.

Row(
  children: [
    Text('Item 1'),
    SizedBox(width: 10),
    Text('Item 2'),
    SizedBox(width: 10),
    Text('Item 3'),
  ],
)

위의 예제에서는 SizedBox 위젯을 이용하여 항목들 사이의 간격을 10픽셀로 조절하고 있습니다.

3. Spacer를 사용하여 간격 조절하기

Spacer는 유연한 간격을 만들기 위해 사용되는 위젯입니다. Spacer 위젯은 flex 속성을 이용하여 남는 공간을 분배합니다.

Row(
  children: [
    Text('Item 1'),
    Spacer(),
    Text('Item 2'),
    Spacer(),
    Text('Item 3'),
  ],
)

위의 예제에서는 Spacer 위젯을 이용하여 항목들 사이에 유연한 간격을 만들었습니다. Spacer는 가능한 큰 공간을 차지하고 남는 공간을 균등하게 분배합니다.

결론

Flutter에서 Row 위젯의 간격을 조절하는 방법에 대해 알아보았습니다. 우리는 mainAxisAlignment, SizedBox, Spacer를 이용하여 간격을 조절할 수 있습니다. 필요에 따라서 적절한 방법을 선택하여 UI를 디자인해보세요.

더 자세한 내용은 Flutter 공식 문서를 참조하시기 바랍니다.