Flutter에서 Row 위젯은 수평으로 여러 개의 자식 위젯을 배치할 수 있는 위젯입니다. 기본적으로 Row 위젯은 자식 위젯들을 가능한 최대한의 너비로 확장시키려고 합니다. 하지만 때로는 자식 위젯들의 크기를 조절하고 싶을 수도 있습니다. 이럴 때는 어떻게 해야 할까요?

자식 위젯의 크기를 조절하는 방법

1. Flexible 위젯 사용하기

Flexible 위젯을 사용하면 Row 위젯 내부의 자식 위젯들의 크기를 조절할 수 있습니다. Flexible 위젯은 사용 가능한 공간을 다른 자식 위젯들과 공유하여 크기를 조절합니다.

다음은 Flexible 위젯을 사용하여 자식 위젯의 크기를 조절하는 예시입니다:

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    Flexible(
      flex: 3,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
  ],
)

위의 코드에서는 세 개의 Flexible 위젯을 사용하여 자식 위젯의 크기를 조절하고 있습니다. 각 Flexible 위젯은 flex 속성을 사용하여 크기를 설정합니다. 이 예시에서 첫 번째 자식 위젯은 1/6, 두 번째 자식 위젯은 2/6, 세 번째 자식 위젯은 3/6의 너비를 차지하도록 설정되었습니다.

2. SizedBox 위젯 사용하기

SizedBox 위젯을 사용하면 정확한 크기를 지정하여 자식 위젯의 크기를 조절할 수 있습니다. SizedBox 위젯은 width와 height 속성을 사용하여 크기를 설정합니다.

다음은 SizedBox 위젯을 사용하여 자식 위젯의 크기를 조절하는 예시입니다:

Row(
  children: [
    SizedBox(
      width: 100,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    SizedBox(
      width: 150,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    SizedBox(
      width: 200,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
  ],
)

위의 코드에서는 세 개의 SizedBox 위젯을 사용하여 자식 위젯의 크기를 조절하고 있습니다. 각 SizedBox 위젯은 width 속성을 사용하여 정확한 너비를 설정합니다.

결론

Flutter의 Row 위젯에서 자식 위젯의 크기를 조절하는 방법에 대해 알아보았습니다. Flexible 위젯을 사용하여 공간을 공유하거나 SizedBox 위젯을 사용하여 정확한 크기를 지정할 수 있습니다. 이를 통해 Row 위젯 내부의 자식 위젯을 원하는 크기로 배치할 수 있게 됩니다.