Flutter에서는 Row 위젯을 사용하여 가로로 여러 개의 위젯을 배치할 수 있습니다. Row는 자식 위젯들을 가로로 정렬하며, 수평 공간을 효율적으로 사용할 수 있게 해줍니다.
Row 위젯의 생성
Row 위젯을 생성하는 방법은 간단합니다. 아래의 코드 예시와 같이 Row 위젯을 생성하고, 그 안에 자식 위젯들을 추가하면 됩니다.
Row(
children: <Widget>[
// 자식 위젯들을 추가하세요
],
)
자식 위젯 배치하기
Row 위젯 내에서 자식 위젯들을 배치하는 방법에는 여러 가지가 있습니다. 일반적으로는 자식 위젯들을 children 속성을 통해 추가하며, 각 위젯을 ,로 구분합니다.
Row(
children: <Widget>[
Widget1(),
Widget2(),
Widget3(),
],
)
또한, mainAxisAlignment 속성을 사용하여 자식 위젯들을 수평으로 어떻게 정렬할지 설정할 수도 있습니다. mainAxisAlignment 속성은 MainAxisAlignment 열거형 값을 받으며, 주요 값으로는 start, end, center, spaceBetween, spaceAround 등이 있습니다.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Widget1(),
Widget2(),
Widget3(),
],
)
자식 위젯의 크기 조절
Row 위젯 내에서 자식 위젯의 크기를 조절하는 방법에는 여러 가지가 있습니다. 간단한 방법은 Expanded 위젯을 사용하여 비율에 따라 자식 위젯들의 크기를 조절하는 것입니다. Expanded 위젯은 자식 위젯을 가능한 최대 크기로 늘립니다.
Row(
children: <Widget>[
Expanded(
child: Widget1(),
),
Expanded(
child: Widget2(),
),
Expanded(
child: Widget3(),
),
],
)
Flexible 위젯을 사용해서도 자식 위젯의 크기를 조절할 수 있습니다. Flexible 위젯은 fit 속성을 통해 자식 위젯이 차지할 수 있는 공간을 조절할 수 있습니다.
Row(
children: <Widget>[
Flexible(
fit: FlexFit.tight,
child: Widget1(),
),
Flexible(
fit: FlexFit.loose,
child: Widget2(),
),
Flexible(
fit: FlexFit.loose,
child: Widget3(),
),
],
)
예시
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 50,
height: 50,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
Container(
width: 150,
height: 150,
color: Colors.blue,
),
],
)
위의 예시 코드는 세 개의 컨테이너를 수평으로 가운데 정렬하여 배치합니다. 첫 번째 컨테이너는 50x50 크기이고, 두 번째 컨테이너는 100x100 크기이며, 세 번째 컨테이너는 150x150 크기입니다.
결론
Flutter에서 Row 위젯은 가로로 여러 개의 자식 위젯을 배치할 때 유용한 도구입니다. children, mainAxisAlignment, Expanded, Flexible 등의 속성을 사용하여 자식 위젯들을 배치하고 크기를 조절할 수 있습니다. 이를 통해 유연하고 다양한 UI를 구현할 수 있습니다.
참고 자료: