Flutter 위젯 정리

 

Flutter 앱을 만들면서 자주 사용하는 위젯들을 예제와 함께 정리했습니다. 각 위젯의 개념과 예제 코드를 함께 확인해보세요.

---

📌 Padding 위젯

자식 위젯 주위에 여백을 주는 위젯입니다.

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

✅ 사용 가능한 EdgeInsets 종류

• EdgeInsets.all(8.0) : 상하좌우 모두 같은 여백
• EdgeInsets.symmetric(vertical: 8.0) : 상하 여백만
• EdgeInsets.symmetric(horizontal: 8.0) : 좌우 여백만
• EdgeInsets.only(left: 40.0) : 개별 방향 지정 가능

---

📌 Image 위젯

이미지를 표시하는 위젯입니다. 네트워크, 에셋, 파일, 메모리 이미지 등 다양한 소스를 지원합니다.

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')

Image.asset('assets/image.png')

Image.file(File('경로'))

Image.memory(bytes)

✅ fit 속성

• BoxFit.contain : 원본 비율 유지, 안 잘림
• BoxFit.fill : 원본 비율 무시하고 꽉 채움
• BoxFit.cover : 원본 비율 유지 + 채우기, 일부 잘릴 수 있음

---

📌 Expanded 위젯

Row 또는 Column 내에서 남은 공간을 채우기 위해 사용하는 위젯입니다.

Expanded(
  child: Image.asset('assets/sample.jpg', fit: BoxFit.cover),
)

✅ flex 속성

• flex: 1이면 기본값
• 여러 Expanded가 있을 때 비율로 나뉩니다

---

📌 SizedBox 위젯

크기를 고정하거나 빈 공간을 만들 때 사용합니다.

SizedBox(height: 10)

SizedBox(
  width: 200,
  height: 300,
  child: Card(child: Text('Hello World!')),
)

---

📌 AppBar 위젯

앱 상단에 고정되는 영역으로, 타이틀, 아이콘 등을 배치할 수 있습니다.

AppBar(
  title: Text('앱 제목'),
  actions: [
    Icon(Icons.search),
    SizedBox(width: 10),
    Icon(Icons.favorite),
  ],
)

---

📌 Container 위젯

박스를 만들어 색상, 테두리, 패딩 등을 추가할 수 있습니다.

Container(
  width: 100,
  height: 100,
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.only(top: 10),
  decoration: BoxDecoration(
    color: Colors.amber,
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Container'),
)

---

📌 Icon 위젯

아이콘을 보여주는 위젯입니다.

Icon(Icons.favorite, color: Colors.red, size: 24.0)

---

📌 ListView 위젯

스크롤 가능한 목록을 만들 수 있습니다.

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

---

📌 Column & Row 위젯

세로/가로 방향으로 위젯을 나열할 때 사용합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Text 1'),
    Text('Text 2'),
  ],
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.menu),
    Text('Title'),
    Icon(Icons.settings),
  ],
)