Flutter 레이아웃 위젯 정리

Flutter는 “모든 것이 위젯(Widget)”이므로, 위젯을 조합해서 레이아웃을 만든다는 개념을 꼭 알아야 한다.

 

1. 기본 정렬/위치 관련 위젯

🔹 Center

• 자식 위젯을 화면 중앙에 배치합니다.

 

Center( child: Text("가운데"), )

🔹 Align

• 자식 위젯을 특정 위치에 정렬합니다.
• alignment 속성 사용 (Alignment.topLeft, Alignment.bottomRight 등).

 

Align( alignment: Alignment.bottomRight, child: Text("오른쪽 아래"), )

🔹 Padding

• 자식 위젯에 여백을 줍니다.

 

Padding( padding: EdgeInsets.all(16), child: Text("여백 있는 텍스트"), )

---

2. 박스 형태 위젯

🔹 Container

• 가장 많이 쓰이는 박스 형태 위젯.
• 크기, 색상, 여백, 테두리 등을 지정할 수 있습니다.

 

Container( width: 200, height: 100, color: Colors.blue, alignment: Alignment.center, child: Text("컨테이너"), )

---

3. 가로/세로 배치

🔹 Row

• 자식 위젯들을 가로로 나열.
• mainAxisAlignment (주축 정렬), crossAxisAlignment (교차축 정렬) 사용.

 

Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Icon(Icons.star), Text("텍스트"), Icon(Icons.star), ], )

🔹 Column

• 자식 위젯들을 세로로 나열.
• 속성은 Row와 동일.

Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text("첫 번째"), Text("두 번째"), Text("세 번째"), ], )

 

---

4. 비율 & 크기 조정

🔹 Expanded

• Row나 Column 안에서 남는 공간을 차지하도록 만듭니다.

Row( children: [ Expanded(child: Container(color: Colors.red, height: 50)), Expanded(child: Container(color: Colors.blue, height: 50)), ], )

🔹 Flexible

• Expanded와 비슷하지만, 자식 위젯 크기에 따라 유연하게 조정.

Flexible( flex: 2, child: Container(color: Colors.green, height: 50), )

---

5. 겹쳐서 배치

🔹 Stack

• 여러 위젯을 겹쳐서 배치합니다.
• Positioned 위젯으로 위치 지정 가능.

 

Stack( children: [ Container(width: 200, height: 200, color: Colors.yellow), Positioned( bottom: 10, right: 10, child: Icon(Icons.star, size: 50, color: Colors.red), ), ], )

---

6. 스크롤 가능한 레이아웃

🔹 ListView

• 스크롤 가능한 리스트.

 

ListView( children: [ ListTile(title: Text("아이템 1")), ListTile(title: Text("아이템 2")), ListTile(title: Text("아이템 3")), ], )

🔹 SingleChildScrollView

• 단일 자식을 스크롤 가능하게 만듭니다.

 

SingleChildScrollView( child: Column( children: List.generate(50, (index) => Text("아이템 $index")), ), )

---

7. 격자(Grid) 레이아웃

🔹 GridView

• 격자 형태로 위젯을 배치.

 

GridView.count( crossAxisCount: 3, // 한 줄에 3개 children: List.generate(9, (index) { return Container( margin: EdgeInsets.all(4), color: Colors.blue, child: Center(child: Text("아이템 $index")), ); }), )

---

정리

• Row / Column → 가로/세로 배치
• Expanded / Flexible → 비율 기반 크기 조정
• Stack + Positioned → 겹쳐서 배치
• ListView / GridView → 스크롤 가능한 레이아웃
• Container / Padding / Align → 크기, 여백, 위치 조정