[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에서는 풍부한 스타일 및 레이아웃 설정 옵션을 제공하여 인터페이스를 다양하게 설계할 수 있습니다.