flutter & dart - Stack 위젯과 Positioned 위젯

Overview. 

이번에는 Stack 과 그 하위 위젯 Positioned 위젯에 대해 살펴봅니다.

1. Stack 위젯이란?
2. 스택 구조의 이해
3. 스택에서 하위 위젯의 역할
4. 스택 정렬
5. 스택 포지셔닝
6. 스택 오버플로
7. 스택의 오버플로 처리
8. 팁 및 문제 해결

 

1. Stack 위젯 이란?

스택이란 무엇입니까?
Flutter의 스택은 여러 위젯을 겹칠 수 있는 위젯입니다. Flutter의 Stack 위젯은 Stack 위젯의 가장자리를 기준으로 하위 위젯을 배치할 수 있다는 점에서 독특합니다. 따라서 Stack 위젯은 Flutter 앱에서 복잡한 레이아웃을 생성하기 위한 강력한 도구가 됩니다.

‍

Flutter에서 스택이 작동하는 방식
Flutter의 Stack 위젯은 Stack 위젯의 가장자리를 기준으로 하위 위젯의 위치를 ​​지정하여 작동합니다. 하위 위젯의 위치는 Stack 위젯의 정렬 속성에 따라 결정됩니다. 기본적으로 정렬 속성은 왼쪽 상단으로 설정됩니다. 즉, 모든 하위 위젯이 Stack 위젯의 왼쪽 상단에 정렬됩니다. 그러나 이 기본값을 변경하여 스택 위젯 내의 어느 위치에나 하위 위젯을 배치할 수 있습니다.

 

2. 스택 구조의 이해

Flutter의 Stack 위젯은 여러 하위 위젯을 포함할 수 있는 상위 위젯입니다. Stack 위젯은 상자 가장자리를 기준으로 하위 항목의 위치를 ​​지정합니다. 스택 위젯은 선입 후출 데이터 구조를 기반으로 합니다. 즉, 첫 번째 하위 위젯이 먼저 그려지고 각 후속 하위 위젯이 이전 위젯 위에 그려집니다.

    // Adding a Stack widget to our Flutter project
    Stack(
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Positioned(
          top: 20,
          left: 20,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.green,
          ),
        ),
      ],
    )

 

3. 스택에서 하위 위젯의 역할

스택의 하위 위젯은 스택의 레이아웃과 모양을 정의하는 데 중요한 역할을 합니다. 각 하위 위젯은 스택 내에서 독립적으로 배치될 수 있으므로 복잡한 레이아웃과 디자인이 가능합니다. 하위 위젯의 위치는 Stack 위젯의 정렬 속성과 하위 위젯 자체의 속성에 따라 결정됩니다.

‍

4. 스택 정렬

스택 정렬 이해
Flutter Stack에서 정렬은 하위 위젯의 위치를 ​​결정하는 데 중요한 역할을 합니다. Stack 위젯의 정렬 속성은 위치가 지정되지 않은 하위 항목의 정렬을 결정합니다. 기본적으로 정렬 속성은 왼쪽 상단으로 설정됩니다. 즉, 위치가 지정되지 않은 모든 하위 위젯은 Stack 위젯의 왼쪽 상단에 정렬됩니다. 그러나 이 기본값을 변경하여 스택 위젯 내의 어느 위치에나 하위 위젯을 배치할 수 있습니다.

‍

스택에서 위젯 정렬
스택에서 위젯을 정렬하려면 스택 위젯의 정렬 속성을 사용할 수 있습니다. 이 속성은 위치가 지정되지 않은 하위 위젯의 가로 및 세로 정렬을 지정하는 Alignment 개체를 사용합니다. 예를 들어 Alignment.center를 사용하여 위치가 지정되지 않은 모든 하위 위젯을 중앙에 배치하거나 Alignment.bottomRight를 사용하여 오른쪽 하단 모서리에 정렬할 수 있습니다.

    // Aligning widgets in a Stack
    Stack(
      alignment: Alignment.bottomRight,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 90,
          height: 90,
          color: Colors.green,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.blue,
        ),
      ],
    )

 

 

5. 스택 포지셔닝 - Positioned 위젯

스택 포지셔닝 이해
Flutter Stack의 위치 지정은 복잡한 레이아웃을 만들 수 있게 해주는 핵심 개념입니다. 정렬 속성은 위치가 지정되지 않은 하위 위젯의 위치를 ​​결정하는 반면, Positioned 위젯을 사용하면 Stack 위젯의 가장자리를 기준으로 하위 위젯을 배치할 수 있습니다. 이를 통해 Stack 위젯 내의 어느 위치에든 하위 위젯을 배치할 수 있으며 여러 위젯을 겹칠 수도 있습니다.

‍

스택에 위젯 위치 지정
스택에 위젯을 배치하려면 Positioned 위젯을 사용할 수 있습니다. 위치 지정 위젯은 위쪽, 오른쪽, 아래쪽, 왼쪽의 네 가지 선택적 매개변수를 사용합니다. 이러한 매개변수는 Stack 위젯의 해당 가장자리에서 Positioned 위젯까지의 거리를 지정합니다. Positioned 위젯을 사용하면 Stack 위젯 내 어느 곳에나 하위 위젯을 배치할 수 있습니다.

 

다양한 레이아웃으로 스택 사용

Flutter의 Stack 위젯을 다양한 레이아웃과 함께 사용하여 복잡한 UI 디자인을 만들 수 있습니다. Stack을 Container, Column, Row, Positioned와 같은 다른 위젯과 결합하여 다양한 레이아웃을 만들 수 있습니다. 스택 위젯을 사용하면 여러 위젯을 겹칠 수 있으며 각 하위 위젯은 스택 내에서 독립적으로 배치될 수 있습니다.

다음은 다양한 레이아웃과 함께 사용되는 스택 위젯의 예입니다. 이 예에는 Row 위젯과 두 개의 Positioned 위젯이 있는 Stack 위젯이 있습니다. Row 위젯에는 두 개의 Container 위젯이 포함되어 있으며, Positioned 위젯은 Stack 위젯의 상단과 하단에 두 개의 Text 위젯을 배치하는 데 사용됩니다.

     // Examples of Stack with different layouts
    Stack(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
        Positioned(
          top: 0,
          left: 0,
          child: Text('Top Left'),
        ),
        Positioned(
          bottom: 0,
          right: 0,
          child: Text('Bottom Right'),
        ),
      ],
    )

 

 

6. 스택 오버플로

Flutter Stack의 오버플로는 하위 위젯이 Stack 위젯의 경계를 넘어 확장될 때 발생합니다. 기본적으로 Stack 위젯은 하위 위젯을 자르지 않습니다. 즉, 하위 위젯이 Stack 위젯 경계 외부에 그려질 수 있다는 뜻입니다. 이로 인해 하위 위젯의 일부가 스택 위젯 외부에 표시될 수 있으며, 이를 오버플로라고 합니다.

     // Understanding overflow in Stack
    Stack(
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Positioned(
          top: 90,
          left: 90,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.green,
          ),
        ),
      ],
    )

위의 코드 조각에는 두 개의 하위 위젯이 있는 Stack 위젯이 있습니다. 첫 번째 하위 위젯은 컨테이너이고, 두 번째 하위 위젯은 위치 지정 위젯입니다. Positioned 위젯은 Stack 위젯의 상단 및 왼쪽 가장자리에서 90단위 위치에 배치되어 Stack 위젯의 경계를 넘어 확장되어 오버플로가 발생합니다.

 

7. 스택의 오버플로 처리

스택의 오버플로는 몇 가지 다른 방법으로 처리될 수 있습니다. 한 가지 방법은 Stack 위젯의 ClipBehavior 속성을 사용하여 하위 위젯을 Stack 위젯의 경계에 맞춰 자르는 것입니다. 또 다른 방법은 Positioned 위젯을 사용하여 하위 위젯이 Stack 위젯의 경계 내에 배치되도록 하는 것입니다.

     // Handling overflow in Stack
    Stack(
      clipBehavior: Clip.hardEdge,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Positioned(
          top: 90,
          left: 90,
          child: Container(
            width: 60,
            height: 60,
            color: Colors.green,
          ),
        ),
      ],
    )

 

위의 코드 조각에는 두 개의 하위 위젯이 있는 Stack 위젯이 있습니다. 첫 번째 하위 위젯은 컨테이너이고, 두 번째 하위 위젯은 위치 지정 위젯입니다. Positioned 위젯은 Stack 위젯의 상단 및 왼쪽 가장자리에서 90단위 떨어진 곳에 위치합니다. ClipBehavior 속성을 Clip.hardEdge 로 설정하면 하위 위젯이 Stack 위젯의 경계에 맞춰 잘려 오버플로가 방지됩니다.

 

 

8. 팁 및 문제 해결

Flutter에서 Stack을 사용하여 작업할 때 개발자는 종종 몇 가지 일반적인 문제에 직면합니다. 여기에는 다음이 포함됩니다.

• 오버플로 문제 : 하위 위젯이 스택 위젯의 경계를 넘어 확장되면 오버플로 문제가 발생할 수 있습니다. 이로 인해 하위 위젯의 일부가 스택 위젯 외부에 표시될 수 있습니다.
• 위치 지정 문제 : 스택 내에서 하위 위젯의 위치를 ​​지정하는 것은 까다로울 수 있으며, 특히 여러 위젯을 처리할 때 더욱 그렇습니다. 올바르게 수행되지 않으면 하위 위젯의 위치가 잘못되거나 예상치 못한 방식으로 겹칠 수 있습니다.
• 성능 문제 : 스택에 많은 수의 하위 위젯이 포함되어 있으면 성능 문제가 발생할 수 있습니다. 이는 스택의 모든 하위 위젯을 배치하고 칠해야 하기 때문입니다. 이는 대규모 스택의 경우 리소스 집약적일 수 있습니다.

일반적인 문제에 대한 솔루션

• 오버플로 처리 : 스택의 오버플로 문제를 처리하려면 Stack 위젯의 ClipBehavior 속성을 사용하여 하위 위젯을 Stack 위젯의 경계에 맞춰 자를 수 있습니다.
• 올바른 위치 지정 : 스택 내에서 하위 위젯을 올바르게 배치하려면 위치 지정 위젯을 사용할 수 있습니다. 이 위젯을 사용하면 Stack 위젯의 가장자리를 기준으로 하위 위젯을 배치하여 정확한 위치 지정을 보장할 수 있습니다.
• 성능 향상 : 스택의 성능을 향상하려면 스택의 하위 위젯 수를 제한해 보세요. 또한 불필요한 위젯 생성을 방지하려면 addAutomaticKeepAlives 속성을 사용하는 것이 좋습니다.

 

 

※ 문서

https://www.dhiwise.com/post/flutter-stack-your-ultimate-guide-to-overlapping-widgets

Flutter Stack: A Comprehensive Guide