[Flutter] Spacer()로 Column 내 요소를 예쁘게 배치

📢 Spacer() 로 화면 크기에 상관없이 Column 내 Widget들을 예쁘게 배치 할 수 있음

---

 

🤔 Spacer(flex: 1) 란 무엇인가?

사용 용도

• Column이나 Row 내에서만 사용되며 Widget 간 여백을 조절하는 용도

사용 이유

• Display 화면 크기에 상관 없이 Column, Row 내 Widget들을 균형있게 배치 가능

 

 

💻 사용 예시

• Line 22 : "로그인" 텍스트 아래 Spacer()로 상단 여백 확보
• Line 26 : 두 번째 Spacer(flex: 2)로 입력 필드와 버튼 간격을 더 넓게 조정
• Line 36 : 마지막 Spacer()로 버튼과 화면 하단 여백 추가

 

 

💡 Spacer() 사용 시 주의사항

• flex 속성을 활용해 여백 비율 조절 가능 (flex 값이 클수록 더 많은 공간 차지)
• Spacer()를 과하게 사용 시 UI 복잡해질 수 있음, 필요한 간격만 설정하기