[Flutter]Layout Widget-Stack편

Flutter에서 Stack 위젯은 여러 자식을 겹쳐서 표시할 수 있게 해주는 레이아웃 위젯이다.
이를 통해 자식 위젯들이 Z축 방향으로 쌓여서 복잡한 오버레이 또는 다양한 시각적 효과를 쉽게 구현할 수 있다.
Stack은 주로 배경에 큰 이미지나 컨테이너를 두고 그 위에 텍스트나 아이콘을 배치할 때 사용된다.

Stack의 주요 속성들

children:
이 속성은 Stack의 자식 위젯들의 목록이다.
Stack은 이 리스트에 있는 각 위젯을 순서대로 쌓아 올린다.
리스트의 첫 번째 위접은 가장 아래에, 마지막 위젯은 가장 위에 위치하게 된다.
alignment: Stack 내에서 자식들의 정렬을 결정한다.
AlignmentDirectional 타입으로,
예를 들어 AlignmentDirectional.topStart, AlignmentDirectional.bottomEnd 등으로 설정할 수 있다.
기본값은 AlignmentDirectional.topStart이다.
fit:
이 속성은 StackFit 열거형을 사용하여
Stack이 자식 위젯을 어떻게 사이즈 조정할지 결정한다.
StackFit.loose:
자식 위젯이 자신의 크기를 유지한다.
StackFit.expand:
자식 위젯이 가능한 Stack의 모든 공간을 차지하도록 확장된다.
StackFit.passthrough:
기본값으로, Stack은 자신의 부모에게 받은 제약 조건을 자식에게 그대로 전달한다.
clipBehavior:
이 속성은 Stack이 화면을 벗어나는 자식 위젯의 그리기 행동을 어떻게 처리할지 결정한다.
Clip 열거형을 사용하며,
예를 들어 Clip.none, Clip.hardEdge, Clip.antiAlias, Clip.antiAliasWithSaveLayer 등이 있다.
기본값은 Clip.hardEdge이다.

Clip.none은 원의 모든 부분이 보이도록 한다.
Clip.hardEdge는 원의 경계가 명확하게 잘린 모습을 보여준다.
Clip.antiAlias는 경계가 부드럽게 처리된 잘린 모습을 보여준다.
(이 차이는 곡선이나 대각선이 있는 모양에서 더욱 두드러진다.)

예제 코드

import 'package:flutter/material.dart';

class StackClipTestWidget extends StatelessWidget {
  const StackClipTestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Clip Behavior Example'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ClipExample(
                title: 'Clip.none',
                clipBehavior: Clip.none,
                backgroundColor: Colors.purple),
            ClipExample(
              title: 'Clip.hardEdge',
              clipBehavior: Clip.hardEdge,
              backgroundColor: Colors.red,
            ),
            ClipExample(
              title: 'Clip.antiAlias',
              clipBehavior: Clip.antiAlias,
              backgroundColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

class ClipExample extends StatelessWidget {
  final String title;
  final Clip clipBehavior;
  final Color backgroundColor;

  const ClipExample(
      {super.key,
      required this.title,
      required this.clipBehavior,
      required this.backgroundColor});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(title,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
        Container(
          width: 120,
          height: 120,
          clipBehavior: clipBehavior,
          decoration: BoxDecoration(
            color: backgroundColor, // 배경색 설정
            border: Border.all(color: Colors.black, width: 3),
          ),
          alignment: Alignment.center,
          child: OverflowBox(
            maxWidth: 160,
            maxHeight: 160,
            child: Container(
              width: 140,
              height: 140,
              decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ),
      ],
    );
  }
}