Row 위젯은 가로로 여러 위젯을 배치하는데 사용되는 Flutter 위젯입니다. Row 위젯 안에서 위젯의 크기를 조절하는 방법에 대해 알아보겠습니다.

1. Expanded 위젯 사용하기

Expanded 위젯은 자식 위젯들이 가지고 있는 공간을 모두 차지할 수 있도록 해주는 역할을 합니다. Row 위젯의 자식 위젯 중 하나를 Expanded 위젯으로 감싸주면 해당 위젯은 남은 공간을 모두 차지할 수 있습니다.

Row(
  children: [
    Expanded(
      child: Container(height: 50, color: Colors.blue),
    ),
    Container(height: 50, color: Colors.red),
    Container(height: 50, color: Colors.green),
  ],
)

위의 예제는 Expanded 위젯을 사용하여 첫 번째 Container 위젯이 남은 공간을 모두 차지하게 됩니다.

2. Flexible 위젯 사용하기

Flexible 위젯은 Expanded 위젯과 비슷한 역할을 하지만, 자식 위젯이 필요한 만큼만 공간을 차지하도록 합니다. Expanded 위젯과 달리 남은 공간을 모두 차지하지 않습니다.

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

위의 예제는 Flexible 위젯을 사용하여 첫 번째와 세 번째 Container 위젯이 같은 크기를 갖고, 두 번째 Container 위젯이 그보다 두 배 크기를 갖도록 설정하였습니다.

3. SizedBox 위젯 사용하기

SizedBox 위젯은 정해진 크기를 가지는 빈 공간을 생성합니다. Row 위젯에서 크기를 조절하려면 SizedBox 위젯을 사용하여 각 위젯의 크기를 설정할 수 있습니다.

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

위의 예제는 SizedBox 위젯을 사용하여 각 Container 위젯의 크기를 설정하였습니다.

결론

Row 위젯에서 자식 위젯의 크기를 조절하기 위해 Expanded, Flexible 및 SizedBox 위젯을 사용할 수 있습니다. 각 위젯은 다양한 방법으로 크기를 조절할 수 있는데, UI 요구사항에 맞게 적절한 방법을 선택하여 사용하면 됩니다.

참고 문서: Flutter 공식 문서 - Row 위젯