Flutter : Stack 위젯은 뭐 할 때 쓰는 거지?

Flutter Stack 위젯은 뭐 할 때 쓰는 거지?

컨테이너 와 같은 위젯을 서로 겹치게 배치를 하고 싶을 때 사용하는 기능입니다.

플러터에서는 그냥 겹치게 할 수 없는 건가?

플러터에서는 기본적으로 컨테이너와 같은 위젯들을 배치하려면 Cloumn, Rows 와 같은 배치용 위젯들을 사용해야 합니다.

저 위젯들을 사용하면 마치 한글 프로그램에서 이미지를 "글자처럼 취급"하여서 가로로 한 줄로 배열하거나 아니면 엔터를 쳐서 세로로 배열하는 것 같은 모양을 나타내게 됩니다.

기본적인 형태이긴 하지만 다소 심심한 디자인들이 나오게 됩니다. 그래서 이미지와 컨테이너 같은 것들을 서로 겹쳐서 배치하여 조금 더 재미있는 디자인을 만들 수 있게 하는 위젯이 Stack입니다. 한글에서 이미지를 "글자처럼 취급"하지 않고 서로 겹치게 설정을 하는 것과 비슷한 효과라고 볼 수 있습니다.

기본적인 코딩은 어떻게 하는 거지?

Column, Rows와 사용 방식은 동일합니다. 배치하고자 하는 위젯들을 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:Stack( children: <Widget> [ Container( color: Colors.yellow, height: 100, width: 80, ), Container( color: Colors.blue, height: 50, width: 50, ), ], ) ), ); } }

너무 겹쳐져 있는데 좀 떨어뜨리려면 어떻게 하지?

위치를 변경하고자 위젯을 Positioned 위젯으로 감싸주면 됩니다. 그 다음 가로, 세로 위치를 지정해주고 child: 에 배치 하고자 하는 위젯을 넣어 주면 됩니다.

 body:Stack( clipBehavior: Clip.hardEdge, children: <Widget> [ Container( color: Colors.yellow, height: 100, width: 80, ), Positioned( top: 50, left: 50, child: Container( color: Colors.blue, height: 50, width: 50, ), ), ], ) 

파란색 네모가 좀 짤린 것 같은데?

Stack에서 기본적인 설정은 코드에서 먼저 작성된 컨테이너 내부에서만 움직이도록 되어 있습니다.

코드를 보시면 노란색 컨테이너가 먼저 작성이 되어 있기 때문에 그 컨테이너의 범위 내에서만 파란색 컨테이너가 이동할 수 있습니다.

만약 그 범위를 넘어서게 되면 위 그림에서 보는 것과 같이 잘리게 됩니다.


그냥 자유롭게 배치하려면 어떻게 해야 되지?