[004] 플러터 (Flutter) 배우기 - Stack (겹쳐 쌓기)

안녕하세요~ totally 개발자입니다.

 

Stack Widget

 

오늘 배울 부분은 바로 Stack입니다. Stack Widget은 다양한 component들을 겹쳐서 쌓을 수 있게 도와주는 위젯으로 주어진 공간에 다양한 컴포넌트들을 중첩할 때 사용합니다. 

 

Stack Widget 기본 활용

먼저 기본적인 Stack의 사용법은 Stack안에는 여러가지 component들을 넣을 수 있기 때문에 배열 형태의 [] 대괄호를 넣어주시면 됩니다. 

 

 

Stack에 height를 부여한 뒤 alignment 속성으로 가운데 정렬한 모습

위 이미지를 보면, 34번째 줄에 height 속성을 부여하고, 36번째 줄에 alignment 속성을 이용하여 가운데 배치한 모습입니다. 이렇게 Stack은 기본적으로 정렬 속성도 제공하여 개발자가 원하는 위치로 간단히 정렬을 할 수 있습니다. 

 

 

Stack을 응용한 모습

Stack의 응용을 쉽게 표현하기 위해, 4개의 Container 위젯을 margin으로 위치 변경을 주어 색다르게 표현을 했습니다. 가장 앞에 배치된 Container(연두색)가 맨 밑에 배치되며, 맨 뒤에 배치된 Container(amber색)가 맨 위에 오는 것을 확인할 수 있습니다.

 

[전체 소스 코드]

 

	import 'package:flutter/material.dart';
	class TestView extends StatefulWidget {
	@override
	State<TestView> createState() => _TestViewState();
	}
	class _TestViewState extends State<TestView> {
	var count = 0;
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("Test Title"),
	),
	drawer: Drawer(
	child: ListView(
	padding: EdgeInsets.zero,
	children: [
	const DrawerHeader(
	decoration: BoxDecoration(
	color: Colors.blue,
	),
	child: Text("Drawer Header Part"),
	),
	ListTile(
	title: Text("Menu 1"),
	),
	],
	),
	),
	body: Container(
	width: MediaQuery.of(context).size.width,
	height: MediaQuery.of(context).size.height,
	child: Stack(
	alignment: AlignmentDirectional.topStart,
	children: [
	Container(
	width: 200,
	height: 200,
	color: Colors.green,
	),
	Container(
	width: 200,
	height: 200,
	margin: EdgeInsets.only(left: 50, top: 50),
	color: Colors.red,
	),
	Container(
	width: 200,
	height: 200,
	margin: EdgeInsets.only(left: 100, top: 100),
	color: Colors.blue,
	),
	Container(
	width: 200,
	height: 200,
	margin: EdgeInsets.only(left: 150, top: 150),
	color: Colors.amber,
	),
	],
	),
	),
	);
	}
	}

view raw 004.dart hosted with ❤ by GitHub

 

[유튜브 강좌 영상]

 

https://youtu.be/0KzEXhk7q9k

마치며...

 

오늘은 Stack에 대하여 같이 살펴보았습니다. 여러 컴포넌트들을 중첩할 때, 유용하게 활용하실 수 있을 것으로 생각하며 다음 시간에는 ListView에 대하여 살펴보도록 하겠습니다. 감사합니다.