![[Flutter #4] Flutter UI 기초 위젯 정리 (SafeArea · Expanded · Image · Text 등)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-09-26T14%3A22%3A16.130Z-b9ccbed9-94a2-4e6b-a13c-89def1b09b84&w=2048&q=75)
플러터(Flutter)로 UI를 만들다 보면 꼭 알아야 할 위젯과 개념들이 있습니다. 이번 글에서는 SafeArea, EdgeInsets, Expanded, Spacer, Image, Text 위젯 등 기초지만 실무에서도 자주 쓰이는 기능들을 정리해보겠습니다.
1. SafeArea와 EdgeInsets
📌 EdgeInsets란?
기기의 시스템 UI(상단바, 하단 내비게이션 바 등) 와 겹치지 않도록 콘텐츠의 위치를 정의하는 값입니다.
EdgeInsets.all(8.0)→ 모든 방향에 동일한 여백
EdgeInsets.only(top: 10, left: 5)→ 특정 방향만 여백
EdgeInsets.symmetric(horizontal: 12, vertical: 8)→ 좌우/상하 대칭 여백
하지만, 매번 인셋을 계산하지 않아도 되는 방법이 있습니다.
👉 SafeArea 위젯을 사용하면 자동으로 시스템 UI 영역을 피해서 배치됩니다.
따라서 인셋 충돌을 직접 처리할 필요가 없습니다.
2. Expanded vs Spacer
- Expanded
- 부모의 남는 공간을 차지
- 자식을 가질 수 있음
flex속성으로 비율 조절 가능
- Spacer
- 남는 공간을 차지하지만 자식을 가질 수 없음
- 단순히 위젯 사이의 공간 확보용
3. 마진 & 여백 위젯
- SizedBox() → 지정된 크기만큼 공간을 차지 (가로/세로 모두 가능)
SizedBox(height: 20), // 세로로 20px 여백
4. 데이터 표현 방식 (XML, JSON, YAML)
- XML :
<태그>기반 구조, 다소 장황함
- JSON : Key-Value 기반, API 통신에 표준적으로 사용
- YAML : 들여쓰기 기반, 2칸 띄우기 규칙 존재, 설정 파일에서 자주 사용 (ex. Flutter
pubspec.yaml)
- pubspec.yaml 파일 수정
5. Image 위젯
Image.asset("assets/bag.jpeg")→ 앱 내부 리소스 불러오기
Image.network("https://...")→ 외부 URL 이미지 불러오기
📌 Expanded와 Image
Expanded(
flex: 1,
child: Image.asset("assets/bag.jpeg"),
)위 코드를 쓰면 이미지는 Expanded 영역을 차지하지만, 비율 유지 때문에 여백이 남습니다.
👉 해결: fit 속성 사용
BoxFit.contain→ 비율 유지 + 빈 공간 허용
BoxFit.fill→ 비율 무시 + 꽉 채움
BoxFit.cover→ 비율 유지 + 넘칠 수 있음
6. Text 위젯
텍스트를 꾸밀 때 가장 많이 쓰는 속성은
style 입니다.Text(
"Woman",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
)7. 컴포넌트(Component) 개념
여러 위젯들이 모여서 하나의 디자인 단위를 이루는 것을 컴포넌트라고 부릅니다.
즉, Flutter에서 만든 UI 요소는 작은 위젯들의 조합으로 만들어집니다.
✅ 오늘 정리한 위젯은 Flutter UI를 만들 때 가장 기본적이지만 필수적인 개념들입니다.
👉 실제 프로젝트에서 SafeArea, Expanded, Image.fit, TextStyle 등을 조합해보면서 체득하는 것이 중요합니다!
Share article