[Flutter/Widget] Spacer, Padding, Image, Expanded, SizedBox

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다.

📌  이번 글은

책의 샘플 앱을 만들면서 공부한 위젯 정리입니다.

 

Spacer

• 위젯 사이의 간격을 조정하는 데 사용

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)),
  ],
),

 

Padding

• 자식 위젯 주위에 여백 생성
• padding: 여백 값 (EdgeInsets 사용)

 

 

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)),
    ],
  ),
),

 

EdgeInsets

• EdgeInserts.all() - 전체 방향에 여백
• EdgeInserts.only() - 원하는 곳만 여백
• EdgeInserts.symmetric() - 수직이나 수평 중 선택하여 여백

 

Image

• 사진 배치에 사용
• fit 속성: 이미지 비율 설정 (BoxFit 사용)

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

 

BoxFit

• BoxFit.contain - 원본사진의 가로 세로 비율 변화 없음.
• BoxFit.fill - 원본사진의 비율을 무시하고 지정한 영역에 사진을 맞춤
• BoxFit.cover - 원본사진의 가로 세로 비율을 유지한 채로 지정한 영역에 사진을 맞춤. (사진이 지정한 크기를 벗어나면 잘릴 수 있음)

 

Expanded 

• 남은 위젯 공간을 확장하여 공간을 채울 수 있도록 하는 위젯

 

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

 

SizedBox

• width/height 크기를 가지는 빈 상자

SizedBox(height: 2),

 

 

 

🙋🏻‍♀️ 참고

최주호, 정호준, 정동진 공저, ⌜모두가 할 수 있는 플러터 UI 입문⌟, 앤써북(2021), p87-p109