Flutter에서는 Row 위젯을 사용하여 수평으로 배치할 수 있습니다. 하지만 때로는 컨트롤러 간에 일정한 여백을 설정해야할 때가 있습니다. 이 글에서는 Row 위젯에서 여백을 설정하는 방법에 대해 알아보겠습니다.

1. MainAxisAlignment 이용하기

Row 위젯에서 각각의 컨트롤러를 가운데 정렬하기 위해서는 mainAxisAlignment 속성을 설정할 수 있습니다. 이 속성은 MainAxisAlignment 열거형으로 구현되어 있으며, 가운데 정렬을 위해서는 MainAxisAlignment.center를 사용합니다. 예를 들면 다음과 같습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.blue),
    Container(width: 50, height: 50, color: Colors.red),
  ],
)

위의 예제에서 mainAxisAlignment 속성을 MainAxisAlignment.center로 설정하면, 각각의 컨트롤러가 가운데에 정렬되며 컨트롤러 간에 일정한 여백이 생성됩니다.

2. SizedBox 이용하기

SizedBox 위젯을 사용하면 간단하게 Row 위젯 내부에서 공간을 주어 컨트롤러 간의 여백을 설정할 수 있습니다. SizedBox는 width와 height를 지정하는 것 외에도, 여백을 주는 BoxConstraints.tightFor를 활용할 수 있습니다.

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.blue),
    const SizedBox(width: 10),
    Container(width: 50, height: 50, color: Colors.red),
  ],
)

위의 예제에서 SizedBox(width: 10)를 사용하여 첫 번째 컨트롤러와 두 번째 컨트롤러 사이에 10픽셀의 여백을 설정하고 있습니다.

3. Padding 이용하기

Padding 위젯을 사용하여 Row 위젯 내부에 여백을 설정할 수도 있습니다. Padding 위젯의 padding 속성을 이용하여 여백을 설정할 수 있습니다. 예를 들면 다음과 같습니다.

Row(
  children: [
    Padding(
      padding: const EdgeInsets.only(right: 10),
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
    Container(width: 50, height: 50, color: Colors.red),
  ],
)

위의 예제에서 Padding 위젯을 사용하여 첫 번째 컨트롤러의 오른쪽에 10픽셀의 여백을 설정하고 있습니다.

Row 위젯에서 각각의 컨트롤러 간에 일정한 여백을 설정하는 방법에 대해 알아보았습니다. 사용하는 상황에 맞게 MainAxisAlignment, SizedBox, 또는 Padding을 적절히 사용하여 여백을 추가해보세요!

(참고: https://api.flutter.dev/flutter/widgets/Row-class.html)