[FLUTTER] Stack

[Stack]

화면에 위젯을 쌓고 싶을 때 사용하는 위젯

Stack(
  children: [ // 자식 위젯들
    Text("위젯1"),
    Text("위젯2"),
  ],
),

• children에서 아래에 있는 위젯이 더 위에 표시됨.
• alignment를 이용해서 자식 위젯들을 이동할 수 있음.

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.green,
          child: Stack(
            alignment: Alignment.topLeft,
            children: [
              Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(0),
                color: Colors.amber,
              ),
              Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(16),
                color: Colors.blue,
              ),
              Container(
                height: 100,
                width: 100,
                margin: EdgeInsets.all(32),
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

→ amber이 코드 상으로는 가장 위에있지만, 더 아래로 표시됨

 

---

<Positioned>

Positioned 위젯을 이용하면 Stack 내부에서 원하는 위치에 배치 가능

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.green,
          child: Stack(
            alignment: Alignment.center, // 기본 중앙 정렬
            children: [
              // 우측 상단
              Positioned(
                right: 0,
                top: 0,
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.amber,
                ),
              ),

              // 우측 하단
              Positioned(
                right: 0,
                bottom: 0,
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.blue,
                ),
              ),

              // 좌측 하단
              Positioned(
                left: 0,
                bottom: 0,
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.pink,
                ),
              ),

              // 중앙
              Container(
                height: 100,
                width: 100,
                color: Colors.indigo,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

아래처럼 Stack 내부에서 원하는 위치에 배치할 수 있음!