stack wedget

Stack 위젯은 Flutter에서 자식 위젯들을 서로 겹치게 배치하는 데 사용됩니다. Stack를 사용하면 하나의 위젯 위에 다른 위젯을 쌓는 방식으로 레이아웃을 구성할 수 있습니다. 자식 위젯들을 기본적으로 겹쳐지며, 이때 자식 위젯의 배치순서와 위치를 지정하는 방법도 제공합니다.

 

 

stack wedget

 

1. Stack 위젯의 주요 특징

• 자식 위젯 겹치기: 여러 자식 위젯을 겹쳐서 배치할 수 있습니다. 예를 들어, 이미지 위에 텍스트를 올리거나, 특정 배경 위에 여러 UI 요소를 겹쳐서 표현할 수 있습니다.
• 정렬 및 위치 지정: Stack 내에서 각 자식 위젯은 Positioned 위젯을 사용해 위치를 지정할 수 있습니다. 이를 통해 자식 위젯들을 Stack 내에서 원하는 위치에 배치할 수 있습니다.
• 맞춤 레이아웃: alignment 속성을 통해 모든 자식 위젯의 기본 정렬을 설정할 수 있습니다.

 

2. Stack 위젯의 주요 속성

2-1 alignment

alignment 속성은 Stack 내의 자식 위젯들이 기본적으로 어디에 위치할지를 결정합니다. 객체를 사용하여 위치를 지정할 수 있습니다. 기본값은 Alignment.topleft로 자식 위젯들이 상단좌측에 배치됩니다.

Stack(
  alignment: Alignment.center,
  children: [
    Text("Centered Text"),
  ],
)

Taxt 위젯이 중앙에 위치합니다.

• Alignment.topLeft: 좌상단 (기본값)
• Alignment.topRight: 우상단
• Alignment.bottomLeft: 좌하단
• Alignment.bottomRight: 우하단
• Alignment.center: 중앙

 

2-2 fit

fit 속성은 Stack의 자식 위젯들이 부모의 크기에 맞춰 확장되거나 자식의 본래 크기를 유지할지를 결정합니다. 이 속성에는 StackFit 열거형 값을 사용합니다.

• StackFit.loose: 자식 위젯들이 자신이 원하는 크기로 배치됩니다. 기본값입니다.
• StackFit.expand: 자식 위젯들이 Stack의 크기에 맞게 확장됩니다.
• StackFit.passthrough: 자식 위젯들이 부모의 제약조건을 그대로 전달받습니다.

Stack(
  fit: StackFit.expand,
  children: [
    Container(color: Colors.blue),
    Text("Expanded Text"),
  ],
)

이 예시에서는 Container와 Text 모두 Stack의 크기에 맞게 확장됩니다.

 

 

 

2-3 clipBehavior

clipBehavior 속성은 Stack의 자식 위젯이 Stack의 경계를 벗어날 때 어떻게 처리할지를 결정합니다. 이 속성은 Clip 열거형 값을 사용합니다.

• Clip.none: 자식 위젯이 경계를 벗어나도 자르지 않습니다.
• Clip.hardEdge: 자식 위젯이 경계를 벗어나면 잘라냅니다.
• Clip.antiAlias: 자식 위젯이 경계를 벗어나면 안티 앨리어싱을 적용하여 잘라냅니다.
• Clip.antiAliasWithSaveLayer: 안티 앨리어싱을 적용하고, 필요한 경우 레이어를 사용하여 잘라냅니다.

Stack(
  clipBehavior: Clip.hardEdge,
  children: [
    Positioned(
      left: -20,
      top: -20,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

이 예시에서는 Container가 Stack의 경계를 벗어나려고 할 때, Clip.hardEdge 속성 덕분에 잘려나갑니다. 

그래서 width 80, height 80 이 보여지게 됩니다.

 

 

2-4 textDirection

textDirection 속성은 Alignment 객체를 해석할 때의 텍스트 방향을 결정합니다. 이는 AlignmentDirectional을 사용하거나 위젯의 배치 순서를 지정할 때 유용합니다.

• TextDirection.ltr: 왼쪽에서 오른쪽으로 텍스트가 배치됩니다. (Left-to-Right)
• TextDirection.rtl: 오른쪽에서 왼쪽으로 텍스트가 배치됩니다. (Right-to-Left)

 

 

2-5 children

children 속성은 Stack 내에서 겹쳐서 배치할 위젯들의 리스트를 정의합니다. 위젯들은 리스트의 순서대로 쌓입니다.

Stack(
  children: [
    Container(color: Colors.red, width: 100, height: 100),
    Container(color: Colors.green, width: 80, height: 80),
    Container(color: Colors.blue, width: 60, height: 60),
  ],
)

이 예시에서는 빨간색 컨테이너가 가장 아래, 초록색이 그 위, 파란색이 가장 위에 위치하게 됩니다.