Flutter에서 UI를 만들다 보면, 위젯들을 겹쳐서 배치해야 하는 경우가 많습니다. 이때 Stack 위젯을 사용하면 위젯을 쉽게 겹치고 원하는 위치에 배치할 수 있습니다. 오늘은 Stack 위젯과 함께 Positioned 위젯을 이용한 겹쳐진 레이아웃 구현 방법을 알아보겠습니다.
Stack
Stack 위젯은 여러 자식 위젯을 겹쳐서 배치할 수 있게 해주는 컨테이너입니다.
- 기본 동작: 자식 위젯들은 오버레이(겹침) 구조로 배열됩니다.
- 순서: Stack의 리스트 순서에 따라 앞쪽에 추가된 위젯이 화면에서 아래쪽에 위치합니다.
주요 속성
- alignment:
- Stack 내 모든 자식 위젯의 기본 정렬 위치를 설정합니다.
- 예: Alignment.topLeft, Alignment.center, Alignment.bottomRight 등.
- fit:
- Stack 위젯의 크기와 자식 위젯의 크기 관계를 설정합니다.
- StackFit.loose (기본값): 자식 위젯은 고유 크기를 유지합니다.
- StackFit.expand: 자식 위젯이 Stack의 크기에 맞게 확장됩니다.
- overflow (Flutter 2.0 이후 제거됨, 대신 clipBehavior 사용):
- Stack 영역을 초과하는 자식 위젯 처리 방식 지정.
Stack 위젯 테스트 코드
alignment 속성을 사용한 예제
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Stack(
alignment: Alignment.bottomRight, // 자식 위젯을 오른쪽 아래로 정렬
children: [
Container(
width: 200,
height: 200,
color: Colors.red, // 큰 컨테이너
),
Container(
width: 100,
height: 100,
color: Colors.blue, // 작은 컨테이너
),
],
),
),
),
);
}
}
실행 결과:
- 빨간색 박스(큰 박스)가 화면 아래쪽 오른쪽에 위치합니다.
- 파란색 박스(작은 박스)가 빨간색 박스 위에 겹쳐집니다.
Positioned 위젯과 Stack 위젯
Positioned 위젯은 Stack 위젯 내부에서 자식 위젯의 정확한 위치를 설정할 때 사용됩니다.
top, bottom, left, right 값을 통해 위치를 지정할 수 있습니다.
Positioned 위젯을 사용한 예제
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Stack(
children: [
// 빨간 박스: 왼쪽 위에서 50px 떨어진 위치
Positioned(
top: 50,
left: 50,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
// 파란 박스: 오른쪽 아래에서 50px 떨어진 위치
Positioned(
bottom: 50,
right: 50,
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),
),
],
),
),
),
);
}
}
실행 결과:
- 빨간 박스는 화면 왼쪽 위에서 50px 떨어진 위치에 배치됩니다.
- 파란 박스는 화면 오른쪽 아래에서 50px 떨어진 위치에 배치됩니다.
Stack vs Positioned
- Stack 위젯만 사용:
- 자식 위젯의 상대적인 정렬이 필요할 때.
- 예: 중심, 상단, 하단 정렬.
- Positioned 위젯과 함께 사용:
- 자식 위젯의 정확한 위치를 지정해야 할 때.
- 예: 특정 좌표(픽셀 값)로 위치를 지정해야 하는 레이아웃.
실제 사용 예시
프로필 카드 예제
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
// 프로필 카드
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
),
),
// 프로필 이미지
Positioned(
top: 20,
child: CircleAvatar(
radius: 50,
backgroundColor: Colors.blue,
),
),
// 이름 태그
Positioned(
bottom: 20,
child: Text(
"홍길동",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
),
),
);
}
}- 중앙에 프로필 카드가 배치되고, 위에는 원형 아바타(사진), 아래에는 이름이 위치한 프로필 UI가 만들어집니다.
Stack 위젯과 Positioned 위젯은 Flutter에서 복잡한 UI를 구성할 때 필수적인 도구입니다.
두 위젯을 잘 활용하면 깔끔하고 효율적인 레이아웃을 쉽게 만들 수 있습니다.