Flutter에서 레이아웃을 구성할 때 Row 위젯은 여러 개의 자식 위젯을 가로로 나란히 배치하는데 유용합니다. 이번 블로그 포스트에서는 Row 위젯에서 여러 개의 자식 위젯을 사용하는 방법에 대해 알아보겠습니다.

Row 위젯 소개

Row 위젯은 자식 위젯들을 가로로 배치하는 데 사용되는 위젯입니다. 각 자식 위젯은 가로 축을 기준으로 일렬로 나란히 배치됩니다. Row 위젯은 자식 위젯의 가로 공간을 균등하게 분배하여 사용하거나, 각 자식 위젯의 크기를 지정할 수 있습니다.

여러 개의 자식 위젯 사용하기

Row 위젯에서 여러 개의 자식 위젯을 사용하려면 children 속성을 사용하면 됩니다. children 속성은 리스트 형태로 자식 위젯들을 받습니다. 예를 들어, 다음과 같이 Row 위젯에서 두 개의 자식 위젯을 사용하는 예를 살펴보겠습니다.

Row(
  children: <Widget>[
    Text('Hello'),
    Text('Flutter'),
  ],
)

위의 예제에서는 “Hello”와 “Flutter”라는 두 개의 Text 위젯을 Row 위젯의 자식으로 사용하고 있습니다.

자식 위젯의 크기 지정하기

Row 위젯에서 자식 위젯들의 크기는 CrossAxisAlignment 속성을 사용하여 조절할 수 있습니다. 이 속성은 Row 위젯의 가로 공간을 대상으로 자식 위젯들의 정렬 방식을 제어합니다. CrossAxisAlignment 속성은 다음의 값들을 가질 수 있습니다:

• CrossAxisAlignment.start: 자식 위젯을 왼쪽으로 정렬합니다.
• CrossAxisAlignment.center: 자식 위젯을 가운데로 정렬합니다.
• CrossAxisAlignment.end: 자식 위젯을 오른쪽으로 정렬합니다.
• CrossAxisAlignment.stretch: 자식 위젯들의 가로 크기를 균등하게 분배합니다.

예를 들어, 다음과 같이 CrossAxisAlignment.center를 사용하여 자식 위젯을 가운데로 정렬하는 예를 살펴보겠습니다.

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Hello'),
    Text('Flutter'),
  ],
)

위의 예제에서는 “Hello”와 “Flutter”라는 두 개의 Text 위젯을 가운데로 정렬하여 Row 위젯의 가로 공간에 배치합니다.

결론

Flutter에서 Row 위젯을 사용하여 여러 개의 자식 위젯을 가로로 배치할 수 있습니다. children 속성을 사용하여 자식 위젯들을 지정하고, CrossAxisAlignment 속성을 사용하여 자식 위젯들의 크기와 정렬 방식을 조절할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하십시오.