Stack Widget

Date: 2024.08.06 Updated: 2024.08.06

카테고리: Widget

Flutter의 Stack 위젯은 여러 개의 위젯을 겹쳐서 배치할 수 있는 레이아웃 위젯입니다. 이 위젯은 자식 위젯들이 서로 겹칠 수 있도록 허용하며, 자식 위젯들은 위젯의 순서에 따라 쌓이게 됩니다. Stack은 다양한 UI 요소를 디자인할 때 매우 유용하며, 특히 커스텀 레이아웃을 만들 때 자주 사용됩니다.

Stack의 기본 사용법

Stack 위젯은 자식 위젯을 추가하기 위해 children 프로퍼티를 사용합니다. 자식 위젯들은 Positioned 위젯과 함께 사용하여 위치를 조정할 수 있습니다.

기본 구조

Stack(
  children: [
    // 첫 번째 자식
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    // 두 번째 자식
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

주요 프로퍼티

children: Stack 안에 쌓일 위젯 목록입니다.
alignment: 자식 위젯을 배치할 기본 정렬 방식을 설정합니다.
fit: 자식 위젯이 Stack의 크기에 어떻게 맞춰질지를 설정합니다. 주로 StackFit.loose, StackFit.expand, StackFit.passthrough 중 하나를 사용합니다.

Stack의 사용 예시

다음은 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 예제'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage('https://via.placeholder.com/300'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(10),
                color: Colors.black54,
                child: Text(
                  '오버레이 텍스트',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

예제 설명

Stack: Stack 위젯을 사용하여 자식 위젯을 겹쳐 놓습니다.
배경 이미지: 첫 번째 자식으로 배경 이미지를 포함한 컨테이너를 추가합니다.
오버레이 텍스트: 두 번째 자식으로 반투명한 배경을 가진 텍스트 컨테이너를 추가하여 이미지 위에 텍스트를 표시합니다.

Stack의 장점

유연성: 여러 개의 위젯을 겹쳐서 복잡한 UI를 쉽게 만들 수 있습니다.
직관적인 레이아웃: 자식 위젯들의 순서만으로 쉽게 시각적 표현을 조정할 수 있습니다.

주의 사항

Stack을 사용할 때 자식 위젯의 크기를 잘 관리해야 합니다. 서로 겹치는 경우 UI가 복잡해질 수 있습니다.
과도하게 사용하면 레이아웃이 복잡해질 수 있으므로 적절히 사용하는 것이 중요합니다.

이러한 방식으로 Stack 위젯을 활용하면 다양한 사용자 인터페이스를 구성할 수 있으며, Flutter의 유연성을 더욱 극대화할 수 있습니다. 블로그 포스트에서 Stack의 다양한 활용 예제를 통해 독자들에게 유용한 정보를 제공할 수 있을 것입니다.

HERKSS GITHUB BLOG