[Flutter] 플러터 Stack 위젯

 

Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다.
Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다.
Stack 위젯은 주로 위젯들 간의 위치를 상대적으로 정의할 때 사용됩니다.

1. Stack 위젯 기본 개념

Stack 위젯은 자식 위젯을 겹쳐서 배치합니다. 기본적으로 마지막에 추가된 위젯이 가장 위에 그려집니다. Stack은 아래와 같은 구조로 구성됩니다:

• 자식 위젯은 리스트의 순서대로 그려집니다.
• alignment 속성을 사용하면 전체 Stack 내에서 자식 위젯의 배치를 조정할 수 있습니다.

 

Stack 위젯과 alignment 속성의 사용

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Stack(
            alignment: Alignment.bottomRight,
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

출력 결과

Stack 위젯과 Positioned 위젯의 사용

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Stack(
            // alignment: Alignment.bottomRight,
            // Stack 위젯안에 Positioned 위젯을 사용할 수 있다.
            children: [
              Positioned(
                top: 50,
                left: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              Positioned(
                bottom: 50,
                right: 50,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

출력 결과

 

• alignment: 전체 Stack 위젯의 자식 정렬을 간단히 조정.
• Positioned: 세밀한 위치 조정이 필요할 때 활용.
• 복잡한 UI: Stack 위젯은 카드, 배너, 오버레이와 같은 복잡한 UI 레이아웃에 유용.

 

lutter의 Stack 위젯은 겹치는 레이아웃을 만들고, alignment와 Positioned를 조합해 다양한 위치 설정을 제공합니다.
위 코드를 연습하며 레이아웃 구현 능력을 키워보세요!

 

💡 플러터의 다른 위젯들이 궁금하다면?

[Flutter] 플러터의 Basic Widget 살펴보기

 

[Flutter] 플러터의 스크롤 위젯을 알아보자

아래의 문헌을 참고하여 작성된 포스팅입니다.
최주호, 김근호, 이지원(공저) 『만들면서 배우는 플러터 앱 프로그래밍』, 앤써북, 2023.