[Flutter] Stack 과 alignment

1. Stack

주요 기능 및 특징

1. 위젯의 겹침:
• Stack 위젯은 자식 위젯들을 겹쳐서 배치할 수 있는 컨테이너입니다.
• 자식 위젯들은 순서대로 겹쳐지며, 리스트에 있는 첫 번째 자식이 가장 아래에, 마지막 자식이 가장 위에 표시됩니다.

2. 위치 지정:
• Stack 안에서 자식 위젯의 위치를 지정하려면, 주로 Positioned 위젯을 사용합니다.
• Positioned 위젯을 사용하여 자식 위젯의 상단, 하단, 좌측, 우측 위치를 지정할 수 있습니다.
• 자식 위젯의 위치를 세밀하게 조정할 수 있어, 화면의 특정 부분에 정확히 배치해야 할 때 유용합니다.

3. 크기 제약 조건:
• Stack 위젯은 부모 위젯의 크기를 따르며, 부모 위젯이 제한하는 크기 내에서 자식들을 배치합니다.
• Positioned 위젯을 사용하지 않으면, 자식 위젯들은 기본적으로 왼쪽 위(좌상단)에서부터 배치됩니다.

4. 정렬 및 맞춤 옵션 (alignment):
• alignment 속성을 사용하면, Stack 내부의 모든 자식 위젯을 특정 위치로 정렬할 수 있습니다. 예를 들어, 위젯을 중앙에 정렬하거나 오른쪽 하단에 배치할 수 있습니다.
• 기본값은 Alignment.topLeft로, 자식 위젯들은 왼쪽 상단을 기준으로 배치됩니다.

5. 오버플로우 처리 (clipBehavior):
• Stack의 자식 위젯들이 Stack의 경계를 넘어갈 수 있으며, 이 경우 어떻게 처리할지를 결정할 수 있습니다.
• clipBehavior 속성으로 자식 위젯이 Stack의 영역을 벗어날 때 그 부분을 잘라낼지, 그대로 표시할지를 설정할 수 있습니다.
• Clip.none으로 설정하면 경계를 벗어난 부분이 잘리지 않고 화면에 그대로 표시됩니다.

- Stack 예시

 Stack _field() {
    return Stack(
      children: [
        TextFormField(
          maxLines: 3,
          decoration: InputDecoration(
            suffixIcon: Icon(Icons.person),
            enabledBorder: OutlineInputBorder(),
          ),
        ),
        Positioned(
          left: 200,
          top: 50,
          child: Icon(Icons.person),
        ),
      ],
    );
  }

2. Align → alignment

Alignment 클래스

• X축: 좌측이 -1.0, 우측이 1.0

• Y축: 상단이 -1.0, 하단이 1.0

주요 Alignment 값

1. Alignment.center: (0.0, 0.0)
• 자식 위젯을 부모의 중앙에 배치합니다.

2. Alignment.topLeft: (-1.0, -1.0)
• 자식 위젯을 부모의 왼쪽 상단에 배치합니다.

3. Alignment.topRight: (1.0, -1.0)
• 자식 위젯을 부모의 오른쪽 상단에 배치합니다.

4. Alignment.bottomLeft: (-1.0, 1.0)
• 자식 위젯을 부모의 왼쪽 하단에 배치합니다.

5. Alignment.bottomRight: (1.0, 1.0)
• 자식 위젯을 부모의 오른쪽 하단에 배치합니다.

6. Alignment.topCenter: (0.0, -1.0)
• 자식 위젯을 부모의 상단 중앙에 배치합니다.

7. Alignment.bottomCenter: (0.0, 1.0)
• 자식 위젯을 부모의 하단 중앙에 배치합니다.

8. Alignment.centerLeft: (-1.0, 0.0)
• 자식 위젯을 부모의 중앙 왼쪽에 배치합니다.

9. Alignment.centerRight: (1.0, 0.0)
• 자식 위젯을 부모의 중앙 오른쪽에 배치합니다.

- alignment 예시

Container _circle() {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(),
        borderRadius: BorderRadius.circular(100),
      ),
      child: Align(
        alignment: Alignment(1.0, 0.0), // -1.0~1.0(가로), -1.0~1.0(세로)
        child: Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
            color: Colors.deepOrange,
            borderRadius: BorderRadius.circular(75),
          ),
        ),
      ),
    );
  }