플러터(Flutter)에서 스택(Stack) 위젯은 다른 위젯들을 겹쳐서 표시할 수 있는 유용한 기능을 제공합니다. 이번 포스트에서는 플러터의 스택드(Stacked) 위젯에 대한 개념과 주요 기능, 그리고 실제 예제를 통해 사용 방법을 알아보겠습니다.

스택(Stack) 위젯이란?

스택(Stack) 위젯은 플러터에서 여러 개의 위젯을 쌓아 올리는 레이아웃을 구성할 때 사용됩니다. 각 위젯의 위치를 지정하여 겹쳐서 표시할 수 있으며, Z축을 기준으로 위젯의 순서를 관리할 수 있습니다. 이를 통해 다양한 디자인을 구현할 수 있습니다.

기본적인 사용 방법

다음은 기본적인 스택(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('Stack Widget Example'),
        ),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 Stack 위젯 안에 두 개의 Container 위젯이 겹쳐져 표시되는 것을 확인할 수 있습니다. 첫 번째 Container는 파란색이고, 두 번째 Container는 빨간색으로 표시됩니다.

스택(Stack) 위젯 속성

스택(Stack) 위젯은 여러 가지 속성을 가지고 있어 다양한 레이아웃을 조절할 수 있습니다. 주요 속성 중 일부를 살펴보겠습니다.

• alignment: 스택 내의 위젯들을 정렬할 때 사용합니다. 기본값은 AlignmentDirectional.topStart입니다.
• fit: 스택 내의 위젯들이 자신의 크기를 어떻게 조절할지 지정합니다. 기본값은 StackFit.loose입니다.
• overflow: 스택의 영역을 벗어나는 경우 어떻게 처리할지 지정합니다. 기본값은 Overflow.clip입니다.

마무리

이번 포스트에서는 플러터의 스택드(Stacked) 위젯에 대한 개념과 기본적인 사용 방법을 알아보았습니다. 스택 위젯을 잘 활용하면 다채로운 UI를 구현할 수 있으니, 창의적으로 활용해보시기 바랍니다.

더 많은 정보를 원하시면 플러터 공식 문서를 참고하실 수 있습니다.