[flutter] Row 위젯에서의 스타일 설정하기
Flutter에서 Row 위젯은 가로로 일렬로 정렬된 자식 위젯을 표시하는데 사용됩니다. 이 때 Row 위젯을 사용하여 스타일을 설정하는 방법에 대해 알아보겠습니다.
Row 위젯의 스타일을 설정하려면 다음 단계를 따르십시오:
- Row 위젯을 생성합니다.
Row( children: [ // 자식 위젯들을 추가해주세요 ], )
- 자식 위젯들을 추가합니다.
Row( children: [ Text('첫 번째 자식 위젯'), Text('두 번째 자식 위젯'), Text('세 번째 자식 위젯'), ], )
- 스타일을 설정합니다.
- Row 위젯의 스타일을 변경하기 위해
style
속성을 사용할 수 있습니다. - 일반적으로 수직 정렬 방향인
mainAxisAlignment
속성과 가로 정렬 방향인crossAxisAlignment
를 설정하는 데 사용합니다.Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ // 자식 위젯들을 추가해주세요 ], )
-
mainAxisAlignment
은 자식 위젯을 수평으로 정렬하는 방향을 설정합니다. 예를 들어MainAxisAlignment.center
를 사용하면 자식 위젯이 가운데로 정렬됩니다. 다른 옵션으로는start
,end
,spaceBetween
,spaceAround
등이 있습니다. crossAxisAlignment
은 자식 위젯을 수직으로 정렬하는 방향을 설정합니다. 예를 들어CrossAxisAlignment.center
를 사용하면 자식 위젯이 세로로 가운데 정렬됩니다. 다른 옵션으로는start
,end
등이 있습니다.
- Row 위젯의 스타일을 변경하기 위해
- 추가적으로 스타일을 설정할 수 있는 속성에 대해 알아봅시다.
mainAxisSize
: Row 위젯의 크기를 설정합니다. 기본 값은MainAxisSize.max
로, 가능한 가장 많은 공간을 차지하도록 합니다.MainAxisSize.min
을 설정하면 내부 위젯 크기만큼만 차지하게 됩니다.textDirection
: 자식 위젯의 텍스트 방향을 설정합니다. 기본 값은TextDirection.ltr
입니다.verticalDirection
: 자식 위젯의 수직 방향을 설정합니다. 기본 값은VerticalDirection.down
입니다.
Row 위젯을 사용하여 가로로 일렬로 정렬된 자식 위젯을 스타일링하는 방법을 알아보았습니다. Flutter에서는 풍부한 스타일 및 레이아웃 설정 옵션을 제공하여 인터페이스를 다양하게 설계할 수 있습니다.