`Stack`은 Flutter에서 여러 위젯을 서로 겹쳐서 배치할 수 있게 해주는 위젯입니다. `Stack`은 기본적으로 자식 위젯을 겹쳐서 쌓아 올리며, 각 위젯의 위치를 `Positioned` 위젯을 사용하여 조정할 수 있습니다. `Stack`은 Z축을 따라 자식 위젯을 배치하며, 첫 번째 자식이 가장 아래에, 마지막 자식이 가장 위에 위치하게 됩니다.
주요 속성
– alignment: `Stack` 내에서 자식 위젯들의 기본 정렬을 설정합니다. 기본값은 `Alignment.topLeft`입니다.
– children: `Stack`에 추가할 자식 위젯들의 목록을 설정합니다.
– fit: 자식 위젯의 크기를 설정하는 방법을 정의합니다. `StackFit.loose`(기본값)과 `StackFit.expand`가 있습니다.
– overflow: `Stack`의 영역을 벗어난 자식 위젯을 어떻게 처리할지 설정합니다. `Overflow.clip`(기본값)과 `Overflow.visible`이 있습니다.
주요 사용 예제
기본 Stack 사용
`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('Flutter Stack Example'),
),
body: Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
),
),
);
}
}
Positioned 위젯 사용
`Positioned` 위젯을 사용하여 `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('Flutter Positioned Example'),
),
body: Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
),
Positioned(
left: 50,
top: 50,
child: Container(
width: 200,
height: 200,
color: Colors.green,
),
),
Positioned(
right: 30,
bottom: 30,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
],
),
),
);
}
}
코드 설명
– 기본 Stack 사용:
– `Stack`의 `children` 속성에 `Container` 위젯을 여러 개 지정하여 겹쳐 배치합니다.
– 각 `Container`는 크기와 색상이 다르게 설정되어 있습니다.
– 순서대로 빨간색, 초록색, 파란색 `Container`가 겹쳐져서 배치됩니다.
– Positioned 위젯 사용:
– `Positioned` 위젯을 사용하여 `Stack` 내에서 자식 위젯의 위치를 지정합니다.
– 첫 번째 `Container`는 전체 크기를 차지하는 빨간색 박스입니다.
– 두 번째 `Container`는 `left`와 `top` 속성을 사용하여 왼쪽 상단에서 50픽셀 떨어진 위치에 초록색 박스를 배치합니다.
– 세 번째 `Container`는 `right`와 `bottom` 속성을 사용하여 오른쪽 하단에서 30픽셀 떨어진 위치에 파란색 박스를 배치합니다.
고급 예제
`Stack`과 `Align` 위젯을 사용하여 자식 위젯을 상대적으로 배치하는 예제입니다.
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('Flutter Stack and Align Example'),
),
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
],
),
),
);
}
}
코드 설명
– Align 위젯 사용:
– `Align` 위젯을 사용하여 `Stack` 내에서 자식 위젯을 상대적으로 배치합니다.
– `alignment` 속성을 사용하여 자식 위젯의 정렬 위치를 지정합니다.
– 첫 번째 `Container`는 `Alignment.topLeft`로 설정되어 왼쪽 상단에 빨간색 박스를 배치합니다.
– 두 번째 `Container`는 `Alignment.center`로 설정되어 중앙에 초록색 박스를 배치합니다.
– 세 번째 `Container`는 `Alignment.bottomRight`로 설정되어 오른쪽 하단에 파란색 박스를 배치합니다.
`Stack`은 Flutter에서 위젯을 겹쳐서 배치할 때 매우 유용하게 사용할 수 있는 위젯입니다. `Positioned`와 `Align` 같은 위젯을 함께 사용하면 더 정밀하게 자식 위젯의 위치를 조정할 수 있습니다.