Flutter 스토어 앱 만들기 - 기본 위젯 정복하기 (2)

Flutter로 스토어 앱을 만들면서 함께 배우는 UI 구성 요소들, 이번에는 Padding, Image, Expanded, SizedBox 위젯을 중심으로 정리해봅니다.

---

 Padding 위젯

Padding 위젯으로 위젯 주위에 여백을 줄 수 있다.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello World!'),
)

 padding에 사용하는 EdgeInsets

• EdgeInsets.all(8.0) : 상하좌우 모두
• EdgeInsets.symmetric(horizontal: 8.0) : 좌우만
• EdgeInsets.only(left: 16.0) : 특정 방향만

 적용 예시:

Padding(
  padding: const EdgeInsets.all(25.0),
  child: Row(
    children: [
      Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
      Spacer(),
      Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
      Spacer(),
      Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
      Spacer(),
      Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

---

 Image 위젯

Flutter에서 이미지를 출력할 때 사용하는 위젯이다.

 종류별 생성자

• Image.network() : 네트워크 이미지
• Image.asset() : 프로젝트에 추가한 이미지
• Image.file() : 디바이스 파일
• Image.memory() : 메모리 상 이미지

 fit 속성

• BoxFit.contain : 비율 유지, 여백 생김
• BoxFit.fill : 비율 무시, 강제로 꽉 채움
• BoxFit.cover : 비율 유지하며 꽉 채움 (잘릴 수 있음)

 

Image.asset("assets/bag.jpg", fit: BoxFit.cover)

---

 Expanded 위젯

Column이나 Row 내에서 남은 공간을 비율로 채우는 위젯이다.

Expanded(
  child: Image.asset("assets/shoes.jpg", fit: BoxFit.cover),
)

• flex 속성으로 비율을 조절할 수 있다.
  • flex: 1, flex: 2 이런 식으로 사용

Expanded(child: Image.asset("assets/bag.jpg", fit: BoxFit.cover)),
Expanded(child: Image.asset("assets/shoes.jpg", fit: BoxFit.cover)),

---

 SizedBox 위젯

공간을 만드는 빈 상자 역할을 하며, 여백이나 사이즈 조절 등에 활용한다.

SizedBox(height: 10)

 

Expanded(child: Image.asset("assets/bag.jpg", fit: BoxFit.cover)),
SizedBox(height: 2),
Expanded(child: Image.asset("assets/shoes.jpg", fit: BoxFit.cover)),

---

 debug 배너 제거하기

상단 우측에 뜨는 DEBUG 배너가 거슬릴 경우 MaterialApp에 debugShowCheckedModeBanner: false를 추가해 숨길 수 있다.

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: StorePage(),
)