플러터(Flutter)에서는 다양한 레이아웃 위젯을 사용하여 앱의 UI를 구성할 수 있습니다. 이 중에서도 Stack 위젯은 여러 위젯을 겹쳐서 배치하는 데 사용되며, 다른 레이아웃 위젯과의 크기 조정 방법은 다소 다를 수 있습니다. 아래에서 Stack 위젯과 다른 레이아웃 위젯의 크기 조정 방법에 대해 알아보겠습니다.

Stack 위젯과 크기 조정

Stack 위젯은 겹쳐진 위젯들을 배치할 때 사용됩니다. Stack 위젯 안에 있는 위젯들은 기본적으로 가장 큰 위젯에 맞춰지는데, 이를 변경하기 위해서는 Positioned 위젯을 사용할 수 있습니다.

Stack(
  children: [
    Positioned(
      top: 10, // 위쪽 여백
      left: 10, // 왼쪽 여백
      width: 100, // 가로 크기
      height: 100, // 세로 크기
      child: Container(
        color: Colors.blue,
      ),
    ),
    Positioned(
      top: 20, // 위쪽 여백
      right: 20, // 오른쪽 여백
      width: 150, // 가로 크기
      height: 150, // 세로 크기
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
);

위의 예제에서는 Stack 위젯 안에 Container 위젯들을 배치하고, 각 Container의 크기와 위치를 조정하기 위해 Positioned 위젯을 사용했습니다. 각 Positioned 위젯의 top, left, right, width, height 속성을 이용하여 위치와 크기를 조정할 수 있습니다.

Stack 위젯은 기본적으로 자식 위젯들을 가운데 정렬하는데, 여러 위젯을 겹쳐서 배치하거나 다른 위치에 배치하려면 Positioned 위젯을 사용하여 원하는 위치에 배치해야 합니다.

다른 레이아웃 위젯과 크기 조정

다른 레이아웃 위젯들은 Stack 위젯과는 다소 다른 방식으로 크기 조정을 제공합니다. 대표적인 레이아웃 위젯인 Row와 Column은 자식 위젯들의 크기를 동적으로 조정하는 것이 일반적입니다.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
);

위의 예제에서는 Row 위젯 안에 Container 위젯들을 배치하고, Expanded 위젯을 사용하여 자식 위젯의 크기를 조정했습니다. Expanded 위젯은 자식 위젯의 크기를 가능한한 확장시켜 부모 위젯에 맞추는 역할을 합니다. flex 속성을 사용하여 여러 Expanded 위젯 간에 크기를 분배할 수 있습니다. 위 예제에서는 첫 번째 Expanded 위젯은 두 번째 Expanded 위젯의 크기의 1/3로 설정되고, 두 번째 Expanded 위젯은 첫 번째 Expanded 위젯의 크기의 2/3로 설정됩니다.

다른 레이아웃 위젯들도 크기 조정을 위한 다양한 속성을 제공하고 있으니, 필요에 따라 적절한 방식으로 사용하면 됩니다.

결론

플러터에서 Stack 위젯과 다른 레이아웃 위젯의 크기 조정 방법을 알아보았습니다. Stack 위젯은 Positioned 위젯을 사용하여 크기와 위치를 조정할 수 있고, 다른 레이아웃 위젯들은 각각의 방식으로 크기를 조정할 수 있습니다. 앱의 UI를 구성할 때 적절한 레이아웃 위젯과 크기 조정 방법을 선택하여 원하는 UI를 구현해보세요.

참고 자료:

• Flutter 공식 문서 - Stack class
• Flutter 공식 문서 - Expanded class