Flutter에서 SizedBox.shrink()를 활용하여 빈 공간 추가하는 방법

1. 문제 상황

Flutter에서 Column 위젯을 사용할 때, 맨 위에 여백을 추가하면서도 각 요소 간 간격을 유지하고 싶을 때가 있다.
보통 SizedBox(height: 18.h)를 사용하여 간격을 조절하지만, 맨 처음 요소의 위쪽에도 동일한 여백을 적용하려면 별도의 빈 위젯이 필요하다.
이때 **SizedBox.shrink()**를 사용하면 불필요한 공간을 차지하지 않으면서도 유동적으로 빈 공간을 추가할 수 있다.

---

2. SizedBox.shrink()란?

SizedBox.shrink()는 공간을 차지하지 않는 빈 위젯을 제공하는 SizedBox의 한 형태이다.
기본적으로 SizedBox()는 특정 width 또는 height 값을 설정하여 빈 공간을 추가할 때 사용되지만,
SizedBox.shrink()는 크기가 0으로 설정되어 레이아웃에 영향을 주지 않는다.
이는 Column, Row 등의 children 리스트에서 위젯을 강제로 추가해야 하는 경우에 유용하다.

---

3. 예제 코드

아래 코드는 맨 위에 여백을 추가하면서도 각 위젯 사이에 18.h의 간격을 유지하는 코드이다.

Column(
  spacing: 18.h, // 각 위젯 사이의 간격을 18.h로 설정
  children: [
    SizedBox.shrink(), // 맨 위 빈 공간을 위한 빈 위젯 추가
    위젯,
    위젯,
    위젯,
  ],
)

---

4. SizedBox(height: 18.h)와의 차이점

사용 방식설명장점

SizedBox(height: 18.h)	고정된 18.h의 빈 공간을 추가	보이는 빈 공간을 직접 조절 가능
SizedBox.shrink()	크기를 0으로 설정하여 빈 위젯 추가	불필요한 여백을 차지하지 않음

---

5. 언제 SizedBox.shrink()를 사용해야 할까?

✅ Column, Row, ListView의 children 리스트에서 반드시 위젯이 필요한 경우
✅ UI의 간격을 유동적으로 조절해야 하지만, 실제 빈 공간을 추가하고 싶지 않을 때
✅ 디자인 요소 간 공백을 유지하면서 코드의 일관성을 유지하고 싶을 때

---

6. 결론

SizedBox.shrink()는 레이아웃에서 강제적으로 빈 공간을 넣어야 할 때 유용한 위젯이다.
특히 Column, Row, ListView에서 첫 번째 요소를 추가하기 전 강제로 빈 공간을 넣고 싶을 때 활용하면 깔끔한 레이아웃을 만들 수 있다. 🚀

---

🎯 마무리

• 각 위젯 간 일정한 간격을 유지하면서 맨 위에도 빈 공간을 넣고 싶다면 SizedBox.shrink()를 활용하자.
• 불필요한 공간을 차지하지 않으면서도 children 리스트에서 첫 번째 요소를 강제할 수 있다.
• Flutter UI를 구성할 때, SizedBox.shrink()를 활용하면 코드의 가독성과 유지보수성이 향상된다. 🚀🔥