[Flutter] 스택(Stack), 정렬(Align) [맥북 💻]

 목차

1. 스택(Stack)
   1. 스택이란?
   2. 예시
2. 정렬(Align)
   1. 정렬이란?
   2. 예시

 

 

 

✅ 스택 (Stack)

 

 

1️⃣ 스택이란? 

• 여러 개의 위젯들을 겹쳐서 쌓는 레이아웃 위젯
  ** Row는 가로로, Column은 세로로 위젯들을 배치하지만 Stack은 한 포인트에 겹쳐서 배치한다
  ** 코드를 짠 순서대로 제일 뒤에서 부터 쌓인다

2️⃣ 예시

1. Stack 위젯으로 두 Container 겹치기

박스별 사이즈를 달리하여 배치

 

2. 밑에 Container에 margin 넣어서 간격 주기

두 번째 박스에 margin 설정하여 배치

 

3. Stack을 Column으로 변경

Stack을 Column으로 변경

 

 

✅ 정렬(Align)

 

 

1️⃣ 정렬이란?

• 자식 위젯을(child) 부모 위젯 안에서 정렬하는 위젯

 

2️⃣ 예시

1. Stack 위젯 내에 여러 개의 Align 위젯 사용

• Stack의 특성(겹치기)을 사용하여 여러 개의 Container를 Align으로 정렬

Stack 위젯 내에 여러 개의 Align 위젯 사용

 

2. Align 위젯을 Column 위젯으로 변경

• Column의 특성(순차적 배치)를 적용하여 여러 개의 Container를 순차적으로 배치

Align 위젯을 Column 위젯으로 변경