Stack 위젯 테스트 코드

Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다 Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다. 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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

출력 화면

 

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] Flutter Scroll Wiget