Flutter Stack 위젯: 설명과 사용법

Flutter는 다양한 위젯을 통해 강력하고 유연한 UI 구성을 제공합니다. 그 중에서도 Stack 위젯은 여러 위젯을 겹쳐서 배치하는 데 유용하게 사용됩니다. 이번 글에서는 Flutter의 Stack 위젯에 대해 자세히 알아보고, 사용법을 예제와 함께 살펴보겠습니다.

Stack 위젯이란?

Stack 위젯은 자식 위젯들을 겹쳐서 쌓는 컨테이너입니다. 즉, 여러 개의 위젯을 한 화면에 겹쳐서 보여줄 수 있습니다. 이를 통해 복잡한 UI를 간단하게 구현할 수 있으며, 특히 겹쳐진 레이아웃이 필요한 경우에 유용합니다.

Stack 위젯의 주요 속성

alignment: 자식 위젯들의 정렬 방식을 지정합니다. 기본값은 AlignmentDirectional.topStart입니다.
fit: 자식 위젯들을 Stack에 맞추는 방식을 지정합니다. StackFit.loose가 기본값이며, StackFit.expand와 StackFit.passthrough도 있습니다.
overflow: 자식 위젯들이 Stack의 경계를 넘을 때의 처리 방식을 지정합니다. Overflow.clip이 기본값입니다.
Positioned 위젯
Stack 내부의 자식 위젯들은 Positioned 위젯을 사용해 특정 위치에 배치할 수 있습니다. Positioned 위젯은 top, left, right, bottom 등의 속성을 사용해 위치를 지정합니다.

예제 코드

간단한 예제를 통해 Stack 위젯의 사용법을 살펴보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Stack Example'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.green,
              ),
              Positioned(
                top: 10,
                left: 10,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              Positioned(
                bottom: 10,
                right: 10,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.yellow,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Stack 위젯은 alignment 속성을 Alignment.center로 설정하여 모든 자식 위젯들이 중앙에 정렬되도록 합니다.
첫 번째 Container는 빨간색 배경을 가지고 있으며, 너비와 높이가 200입니다.
두 번째 Container는 초록색 배경을 가지고 있으며, 너비와 높이가 150입니다.
Positioned 위젯을 사용하여 세 번째 Container를 Stack의 상단 왼쪽에 배치합니다.
또 다른 Positioned 위젯을 사용하여 네 번째 Container를 Stack의 하단 오른쪽에 배치합니다.
이 예제에서는 서로 다른 크기와 위치에 있는 네 개의 컨테이너를 겹쳐서 배치했습니다. Stack과 Positioned 위젯을 사용하면 복잡한 레이아웃도 쉽게 구현할 수 있습니다.