Flutter 학습: 레이아웃 및 UI 구성
Flutter는 다양한 레이아웃 위젯을 제공하여 복잡한 사용자 인터페이스를 쉽게 구성할 수 있습니다. 이번 글에서는 레이아웃 위젯, 정렬 및 정렬 위젯, 리스트 및 스크롤 위젯에 대해 알아보겠습니다.
1. 레이아웃 위젯: Container, Row, Column, Stack
Container: Container 위젯은 여백, 패딩, 정렬, 크기, 배경색 등을 설정할 수 있는 다목적 위젯입니다.
예제:
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text(
'Hello',
style: TextStyle(color: Colors.white),
),
),
)
Row: Row 위젯은 자식 위젯들을 수평으로 정렬하는 위젯입니다.
예제:
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(width: 50, height: 50, color: Colors.red),
Container(width: 50, height: 50, color: Colors.green),
Container(width: 50, height: 50, color: Colors.blue),
],
)
Column: Column 위젯은 자식 위젯들을 수직으로 정렬하는 위젯입니다.
예제:
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('First'),
Text('Second'),
Text('Third'),
],
)
Stack: Stack 위젯은 자식 위젯들을 서로 겹쳐서 배치하는 위젯입니다.
예제:
children: [
Container(width: 100, height: 100, color: Colors.red),
Positioned(
left: 20,
top: 20,
child: Container(width: 50, height: 50, color: Colors.blue),
),
],
)
2. 정렬 및 정렬 위젯: Align, Center, Padding, Margin
Align: Align 위젯은 자식 위젯을 부모 위젯 내에서 특정 위치에 정렬할 수 있는 위젯입니다.
예제:
alignment: Alignment.bottomRight,
child: Container(
width: 50,
height: 50,
color: Colors.green,
),
)
Center: Center 위젯은 자식 위젯을 부모 위젯 내에서 중앙에 정렬하는 위젯입니다.
예제:
child: Text('Centered Text'),
)
Padding: Padding 위젯은 자식 위젯 주위에 여백을 추가하는 위젯입니다.
예제:
padding: EdgeInsets.all(16.0),
child: Text('Padded Text'),
)
Margin: Margin은 Container 위젯의 margin 속성을 사용하여 설정할 수 있습니다.
예제:
margin: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text('Margin Container'),
)
3. 리스트 및 스크롤: ListView, GridView, SingleChildScrollView
ListView: ListView 위젯은 스크롤 가능한 리스트를 만드는 데 사용됩니다.
예제:
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
)
GridView: GridView 위젯은 스크롤 가능한 격자 레이아웃을 만드는 데 사용됩니다.
예제:
crossAxisCount: 2,
children: List.generate(6, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline5,
),
);
}),
)
SingleChildScrollView: SingleChildScrollView 위젯은 자식 위젯이 넘칠 경우 스크롤 가능한 단일 위젯을 만드는 데 사용됩니다.
예제:
child: Column(
children: List.generate(50, (index) {
return Text('Item $index');
}),
),
)
이 글에서는 Flutter의 레이아웃 및 UI 구성에 필요한 기본적인 위젯들에 대해 알아보았습니다. Container, Row, Column, Stack을 사용하여 레이아웃을 구성하고, Align, Center, Padding, Margin을 사용하여 정렬과 여백을 설정하며, ListView, GridView, SingleChildScrollView를 사용하여 스크롤 가능한 리스트와 격자를 만들 수 있습니다. 이러한 위젯들을 조합하여 다양한 UI를 구성할 수 있습니다. Happy Coding!
'프로그래밍 > Flutter' 카테고리의 다른 글
[Flutter] 6. Flutter의 "네트워킹 및 데이터 처리" (0) | 2024.06.26 |
---|---|
[Flutter] 5. Flutter의 "상태 관리" (0) | 2024.06.25 |
[Flutter] 4. Flutter의 "기본 위젯 사용" (0) | 2024.06.23 |
[Flutter] 2. Flutter의 "기본 개념" (0) | 2024.06.21 |
[Flutter] 1. Flutter의 "소개 및 설치" (0) | 2024.06.21 |