Flutter의 스택(Stack) 위젯 사용법

Flutter에서 Stack 위젯은 자식 위젯들을 겹쳐서 배치하는 데 사용됩니다. 이는 복잡한 레이아웃을 구성하거나 여러 위젯을 중첩하여 표시할 때 유용합니다. Stack 위젯은 자식 위젯들을 쌓아 올리는 방식으로 배치하며, 각 자식 위젯의 위치는 Positioned 위젯을 사용하여 지정할 수 있습니다. 이번 글에서는 Flutter의 Stack 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Stack 사용법

Stack 위젯의 기본적인 사용법은 여러 자식 위젯을 겹쳐서 배치하는 것입니다.

 

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

 

위 코드는 세 개의 컨테이너를 겹쳐서 배치합니다. 각 컨테이너는 서로 다른 크기와 색상을 가지고 있습니다.

2. Positioned 위젯 사용

Positioned 위젯은 Stack 위젯의 자식 위젯의 위치를 지정하는 데 사용됩니다. left, right, top, bottom 속성을 사용하여 자식 위젯의 위치를 지정할 수 있습니다.

 

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 50,
      top: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
    Positioned(
      right: 10,
      bottom: 10,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
)

 

위 코드는 첫 번째 컨테이너를 기본 위치에 배치하고, 두 번째 컨테이너를 왼쪽 50픽셀, 위쪽 50픽셀 위치에 배치하며, 세 번째 컨테이너를 오른쪽 10픽셀, 아래쪽 10픽셀 위치에 배치합니다.

3. Alignment 속성 사용

Stack 위젯은 alignment 속성을 사용하여 자식 위젯들의 기본 정렬 위치를 지정할 수 있습니다. Alignment 클래스를 사용하여 중앙, 상단, 하단, 좌우 등의 위치를 설정할 수 있습니다.

 

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

 

위 코드는 모든 자식 컨테이너를 스택의 중앙에 정렬합니다.

 

반응형

 

 

4. Fit 속성 사용

Stack 위젯은 fit 속성을 사용하여 자식 위젯의 크기 조정 방식을 지정할 수 있습니다. StackFit 열거형의 값을 사용하여 조정합니다.

 

Stack(
  fit: StackFit.expand,
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green.withOpacity(0.5),
    ),
    Container(
      color: Colors.blue.withOpacity(0.3),
    ),
  ],
)

 

위 코드는 모든 자식 컨테이너를 스택의 전체 크기에 맞게 확장합니다.

5. Overflow 속성 사용

Stack 위젯의 overflow 속성은 자식 위젯이 스택의 경계를 벗어나는 경우 어떻게 처리할지를 지정합니다. Overflow.visible과 Overflow.clip 중에서 선택할 수 있습니다. (참고: overflow 속성은 Flutter 2.0 이후 deprecated 되었으며, 대신 clipBehavior를 사용합니다.)

 

Stack(
  clipBehavior: Clip.none,
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 180,
      top: 180,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
  ],
)

 

위 코드는 두 번째 컨테이너가 스택의 경계를 벗어나도록 배치하며, clipBehavior를 Clip.none으로 설정하여 자식 위젯이 잘리지 않도록 합니다.

결론

Stack 위젯은 Flutter에서 자식 위젯들을 겹쳐서 배치하는 데 매우 유용한 도구입니다. Positioned 위젯을 사용하여 자식 위젯의 위치를 세밀하게 조정할 수 있으며, alignment, fit, clipBehavior 속성을 통해 스택의 배치 방식을 다양하게 설정할 수 있습니다. Stack 위젯을 활용하여 복잡하고 동적인 레이아웃을 쉽게 구현해보세요. Flutter의 Stack 위젯을 통해 아름답고 유연한 사용자 인터페이스를 만들어보세요.