[flutter] Row 위젯에서의 가중치 설정하기
Flutter에서 Row 위젯을 사용하여 여러 개의 자식 위젯을 가로로 배치할 수 있습니다. Row 위젯은 자식 위젯들 사이의 가로 공간을 분배하는 방법을 결정할 수 있습니다. 이 때, 가중치(Weight)를 설정하여 각 자식 위젯이 차지하는 공간의 비율을 조절할 수 있습니다.
가중치를 설정하기 위해서는 Expanded
위젯을 사용합니다. Expanded
위젯은 자식 위젯을 감싸고, 가중치를 설정하여 자식 위젯이 얼마만큼의 공간을 차지할지를 결정합니다. 가중치는 해당 자식 위젯의 flex
속성을 사용하여 결정합니다.
Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
height: 100,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
height: 100,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.green,
height: 100,
),
),
],
)
위의 예제에서는 Row
위젯 안에 3개의 Container
위젯이 있습니다. 첫 번째 Container
의 flex
속성을 1로 설정하여 가중치를 1로 지정하였고, 두 번째 Container
는 2, 세 번째 Container
는 3으로 가중치를 지정하였습니다.
결과적으로 첫 번째 Container
는 1/6의 가로 공간을 차지하고, 두 번째 Container
는 2/6, 세 번째 Container
는 3/6의 가로 공간을 차지하게 됩니다.
이와 같이 가중치를 설정하여 Row 위젯에서 자식 위젯들에게 원하는 비율의 공간을 할당할 수 있습니다.
더 자세한 사용법은 공식 문서를 참고하시기 바랍니다.