플러터(Flutter)에서는 UI를 구성하기 위한 다양한 위젯들을 제공합니다. 그중에서 Stack 위젯은 여러 위젯을 겹쳐서 사용자 정의 UI를 만들 수 있는 강력한 도구입니다.

Stack 위젯 사용법

Flutter에서 Stack 위젯을 사용하는 방법은 간단합니다. 다음과 같은 단계를 따르면 됩니다.

1. Stack 위젯을 생성합니다.
2. Stack 위젯에 원하는 자식 위젯들을 추가합니다.
3. 각 자식 위젯의 위치를 설정합니다.

예를 들어, 두 개의 컨테이너(Container) 위젯을 Stack 위젯에 추가하고, 각 컨테이너의 위치를 조정해 보겠습니다.

import 'package:flutter/material.dart';

class MyStackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
          Positioned(
            top: 50,
            left: 50,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 첫 번째 컨테이너를 기준으로 x축, y축을 사용하여 두 번째 컨테이너의 위치를 조정하였습니다. 첫 번째 컨테이너는 Stack 위젯에 바로 추가되었고, 두 번째 컨테이너는 Positioned 위젯 안에 추가되어 위치를 설정하였습니다.

Stack 위젯의 주요 속성

Stack 위젯은 다양한 속성을 제공하여 컨테이너의 크기, 위치 등을 조정할 수 있습니다. 이 중에서 주로 사용되는 속성을 살펴보겠습니다.

• alignment: Stack 위젯 안의 자식 위젯들의 정렬 방식을 설정합니다. 기본값은 AlignmentDirectional.topStart 입니다.
• fit: Stack 위젯 안의 자식 위젯들의 크기를 조정하는 방식을 설정합니다. 기본값은 StackFit.loose 입니다.
• overflow: Stack 위젯 안의 자식 위젯들이 Stack 위젯을 벗어났을 때의 처리 방식을 설정합니다. 기본값은 Overflow.visible 입니다.

이 외에도 Stack 위젯은 마치 z-index와 같은 개념을 사용하여 다양한 위젯들을 겹칠 수 있습니다. 이를 이용해 UI를 다양하게 구성할 수 있습니다.

결론

플러터에서의 Stack 위젯은 여러 위젯들을 겹쳐서 사용자 정의 UI를 만들 수 있는 강력한 도구입니다. Stack 위젯의 사용법과 주요 속성을 알아보았으니, 이를 활용하여 다양한 UI를 구현해 보세요. Flutter에는 다양한 위젯들과 속성들이 있으니, 공식 문서를 참고하여 더 많은 정보를 알아보세요!

참고: Flutter 공식 문서