위젯 소개
플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있습니다.
위젯은 현재 주어진 상태(state)를 기반으로 어떤 UI를 구현할지를 정의합니다.
상태가 변경되면 변경 사항에 알맞게 UI를 화면에 다시 그려줍니다.
위젯은 개발자가 직접 만들수도 있습니다.
위젯은 자식을 하나만 갖는 위젯과 여럿 갖는 위젯으로 나뉩니다.
자식을 하나만 갖는 대표적인 위젯을 다음과 같습니다.
- Container: 자식을 담는 컨테이너 역할을 합니다. 배경색, 너비와 높이, 테두리 등을 디자인할 수 있습니다.
- GestureDetector: 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯입니다.
- SizedBox: 높이와 너비를 지정하는 위젯입니다.
자식을 여럿 갖는 대표적인 위젯은 다음과 같습니다.
- Column: children 매개변수에 입력된 모든 위젯들을 세로로 배치합니다.
- Row 위젯: children 매개변수에 입력된 모든 위젯들을 가로로 배치합니다.
- ListView: 리스트를 구현할 때 사용합니다. 스크롤도 가능합니다.
이외에도 플러터에서 기본으로 제공하는 위젯들은 공식 웹사이트에서 확인할 수 있습니다.
https://flutter.dev/docs/development/ui/widgets
이제 위에서 몇가지 위젯을 상세히 살펴보겠습니다.
텍스트 관련 위젯
Text(
'hello world',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.blue,
),
)제스처 관련 위젯
Button
TextButton(
onPressed: () => {},
child: Text(
'Click Me',
),
),GestureDetector
GestureDetector(
onTap: () => {
print('tab');
},
onLongPress: () => {
print('long press');
},
child: Container(
decoration: BoxDecoration(
color: Colors.red
),
width: 100.0,
height: 100.0
),
),floatingActionButton
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Text(
'클릭',
),
),
body: Container(),
),디자인 관련 위젯
Container
Container(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
width: 16.0,
color: Colors.black,
),
borderRadius: BorderRadius.circular(
16.0,
),
height: 200.0,
width: 100.0,
),
),SizedBox
SizedBox(
height: 200.0,
width: 200.0,
child: Container(
color: Colors.red,
),
),Padding
Container(
color: Colors.blue,
child: Padding(
padding: EdgeInsets.all(
16.0,
),
child: Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
),
),SafeArea
현대 스마트폰은 크기와 디자인 모두 여러 가지입니다. 특히 아이폰의 노치 디자인은 특이합니다. 따라서 노치 등에 위젯이 가려지지 않기 위해 SafeArea를 사용하여 기기별로 예외 처리를 하지 않고 안전한 화면에서만 위젯을 그릴 수 있습니다.
SafeArea(
top: true,
bottom: true,
left: true,
right: true,
child: Container(
color: Colors.red,
height: 300.0,
width: 300.0,
),
),배치 관련 위젯
Row
가로로 위젯을 배치할 때 사용합니다.
SizedBox(
// 반대축 (세로)에서 이동할 공간을 제공해주기 위해 높이를 최대한으로 설정
height: double.infinity,
child: Row(
// 주축 정렬 지정
mainAxisAlignment: MainAxisAlignment.start,
// 반대축 정렬 지정
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50.0,
width:50.0,
color: Colors.red,
),
// SizedBox는 일반적으로 공백을 생성할 때 사용
const SizedBox(width: 12.0),
Container(
height: 50.0,
width:50.0,
color: Colors.green,
),
const SizedBox(width: 12.0),
Container(
height: 50.0,
width:50.0,
color: Colors.blue,
),
],
),
),Column
세로로 위젯을 배치합니다.
SizedBox(
// 반대축 (가로)에서 이동할 공간을 제공해주기 위해 너비를 최대한으로 설정
width: double.infinity,
child: Column(
// 주축 정렬 지정
mainAxisAlignment: MainAxisAlignment.start,
// 반대축 정렬 지정
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50.0,
width:50.0,
color: Colors.red,
),
// SizedBox는 일반적으로 공백을 생성할 때 사용
const SizedBox(width: 12.0),
Container(
height: 50.0,
width:50.0,
color: Colors.green,
),
const SizedBox(width: 12.0),
Container(
height: 50.0,
width:50.0,
color: Colors.blue,
),
],
),
),Flexible
Row나 Column에서 사용하는 위젯입니다.
Flexible의 제공된 child가 크기를 최소한으로 차지하게 할 수 있습니다.
추가적으로 flow 매개변수를 이용해 각 Flexible 위젯이 얼만큼의 비율로 공간을 차지할지 지정할 수 있습니다.
Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.blue,
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.red,
),
),
],
),Expanded
Flexible 위젯을 상속하는 위젯입니다. Column과 Row에서 Expanded를 사용하면 위젯이 남아 있는 공간을 최대한으로 차지합니다. 부모인 Flexible 위젯의 fit 매개변수에 FlexFit.tight가 디폴트로 지정됩니다.
Column(
children: [
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Container(
color: Colors.red,
),
),
],
),Stack
위젯을 겹치는 기능을 제공합니다.
플러터의 그래픽 엔진인 스키아 엔진은 2D 엔진으로 겹친 두께를 표현하진 못하지만 위젯 위에 위젯을 올린 듯한 효과를 줍니다.
Stack(
children: [
Container(
height: 300.0,
width: 300.0,
color: Colors.blue,
),
Container(
height: 250.0,
width: 250.0,
color: Colors.red,
),
Container(
height: 200.0,
width: 200.0,
color: Colors.green,
),
],
),《Must Have 코드팩토리의 플러터 프로그래밍 2판》의 스터디 내용 입니다.
