플러터(Flutter)에서 Stack 위젯은 여러 위젯을 겹쳐서 배치하는 데 사용됩니다. Stack 위젯을 사용하면 다양한 형태의 레이아웃을 구현할 수 있으며, 자식 위젯을 추가할 때 몇 가지 방법을 사용할 수 있습니다.

1. children 속성을 사용하여 자식 위젯 추가하기

가장 간단한 방법은 Stack 위젯의 children 속성을 사용하여 자식 위젯을 추가하는 것입니다. children 속성은 List<Widget> 형식으로, Stack 위젯의 자식으로 추가될 위젯들의 목록을 가지고 있습니다.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
  ],
)

위의 예제에서는 Stack 위젯의 자식으로 Container 위젯을 두 개 추가했습니다. 첫 번째 Container는 빨간색으로, 두 번째 Container는 파란색으로 표시됩니다.

2. Positioned 위젯을 사용하여 자식 위젯 배치하기

Stack 위젯을 사용할 때 자식 위젯을 정확한 위치에 배치해야 할 경우에는 Positioned 위젯을 사용할 수 있습니다. Positioned 위젯은 Stack 위젯 안에서 자식 위젯을 배치하기 위해 사용되며, top, left, right, bottom 등의 속성을 사용하여 위치를 지정할 수 있습니다.

Stack(
  children: [
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 100,
      left: 100,
      child: Container(
        width: 150,
        height: 150,
        color: Colors.blue,
      ),
    ),
  ],
)

위의 예제에서는 Positioned 위젯을 사용하여 각각의 Container 위젯을 특정 위치에 배치했습니다. 첫 번째 Container는 (50, 50) 좌표에 배치되고, 두 번째 Container는 (100, 100) 좌표에 배치됩니다.

3. Align 위젯을 사용하여 자식 위젯 정렬하기

Align 위젯은 Stack 위젯 안에서 자식 위젯을 정렬하기 위해 사용됩니다. Align 위젯은 alignment 속성을 사용하여 자식 위젯을 어느 위치에 정렬할지 지정할 수 있습니다.

Stack(
  children: [
    Align(
      alignment: Alignment.topLeft,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Container(
        width: 150,
        height: 150,
        color: Colors.blue,
      ),
    ),
  ],
)

위의 예제에서는 Align 위젯을 사용하여 각각의 Container 위젯을 특정 위치에 정렬했습니다. 첫 번째 Container는 왼쪽 위 모서리에 정렬되고, 두 번째 Container는 오른쪽 아래 모서리에 정렬됩니다.

결론

플러터에서 Stack 위젯을 사용하여 여러 위젯을 겹쳐서 배치하는 방법을 배웠습니다. Stack 위젯의 children 속성을 사용하거나 Positioned 위젯이나 Align 위젯을 사용하여 자식 위젯을 추가하고 원하는 위치에 배치할 수 있습니다. 위의 예제 코드를 참고하여 원하는 레이아웃을 구현해보세요.