플러터 [Flutter] Stack 위젯 사용법 총정리

 
오늘은 Stack 위젯 사용법을 알아보겠다.
 

Stack  사용 이유

기본적으로 Flutter의 위젯들은 한층 한층 쌓이는 형태이다.

 
그러면 위젯들을 겹치고 싶으면 어떻게 할까?
그때 Stack 위젯을 사용하면 된다.
 

Stack 사용법

위에 코드에서 column을 stack으로 바꿔보자

 
그러면 Container 위젯들이 이렇게 겹쳐지게 된다.
여기서 알 수 있는것은 코드 순서대로 위젯이 쌓인다는 것이다.
 

Positioned

Stack에서 위젯들의 위치를 설정할 때는 positioned를 사용한다.
positioned 사용법은 위치를 설정하고 싶은 위젯에 positioned 위젯을 감싸면 된다.
 
positioned을 상, 하, 좌, 우, 높이, 너비를 설정할 수 있는데,
높이, 너비는 여러분이 생각하는 높이, 너비 맞고
상, 하, 좌, 우 값은 떨어뜨릴 길이를 설정하는것이다.
 
말로 설명이 어려워 보여주면
widget 3을 Positioned로 감싼 후 left 값을 170으로 설정해 보겠다.

 
widget 3가 좌측에서 170 떨어진 것을 확인할 수 있다.
 

전체 코드

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stack test'),
        ),
        body: Center(
          child: Stack(
            children: [
              Container(
                alignment: Alignment.bottomCenter,
                height: 300,
                width: 350,
                color: const Color.fromARGB(255, 218, 255, 149),
                child: const Text(
                  'Widget 1',
                  style: TextStyle(fontSize: 33),
                ),
              ),
              Container(
                alignment: Alignment.bottomCenter,
                height: 250,
                width: 250,
                color: const Color.fromARGB(255, 197, 186, 255),
                child: const Text(
                  'Widget 2',
                  style: TextStyle(fontSize: 33),
                ),
              ),
              Positioned(
                left: 170,
                child: Container(
                  alignment: Alignment.bottomCenter,
                  height: 200,
                  width: 150,
                  color: const Color.fromARGB(255, 175, 244, 197),
                  child: const Text(
                    'Widget 3',
                    style: TextStyle(fontSize: 33),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }