1. 텍스트 관련 위젯
- 화면에 글자를 보여주려면 글자를 렌더링할 수 있는 위젯을 사용.
Text(
'텍스트 내용',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.blue,
),
)
2. 제스처 관련 위젯
- 키보드로 글자를 입력하는 행위 외의 모든 입력을 제스처라고 한다.
- 탭, 더블 탭, 길게 누르기, 드래그 등 모두가 제스처
- 제스처 관련 위젯은 하위 위젯에 제스처가 입력됐을 때 인지하고 콜백 함수를 실행한다.
2-1. Button 위젯
▶ 텍스트만 있는 버튼
TextButton(
onPressed: (){},
style: TextButton.styleFrom(
foregroundColor: Colors.red,
),
chlid: Text('텍스트 버튼'),
)
▶ 테두리가 있는 버튼
OutlinedButton(
onPressed: (){},
style: OutlinedButton.styleFrom(
foregroundColor: Colors.red,
),
child: Text('테두리가 있는 버튼'),
)
▶ 입체적으로 튀어나온 느낌의 배경이 들어간 버튼
ElevatedButton(
onPressed: (){},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
),
child: Text('입체적인 버튼'),
)
2-2. IconButton 위젯
- 아이콘을 버튼으로 생성하는 위젯
- onPressed 변수에 아이콘을 누르면 실행 할 콜백 함수 제공
IconButton(
onPressed: (){},
icon: Icon(
Icons.home,
),
)
2-3. GestureDetector 위젯
- 앱은 모든 입력을 손가락으로 한다.
- 손가락으로 하는 여러가지 입력을 인지하는 위젯
GestureDetector(
onTap: (){
print('한 번 탭하기.');
},
onDoubleTap: () {
print('더블 탭하기.');
},
onLongPress: () {
print('길게 탭하기.');
},
onPanStart() {
print('수평 또는 수직으로 드래그가 시작됨.');
},
onPanUpdate() {
print('수평 또는 수직으로 드래그하는 동안 위치가 업데이트 될때마다 실행.');
},
onPanEnd() {
print('수평 또는 수직으로 드래그가 끝났을 때.');
},
onHorizontalDragStart() {
print('수평으로 드래그가 시작됨.');
},
onHorizontalDragUpdate() {
print('수평으로 드래그하는 동안 위치가 업데이트 될때마다 실행.');
},
onHorizontalDragEnd() {
print('수평으로 드래그가 끝났을 때.');
},
onVerticalDragStart() {
print('수직으로 드래그가 시작됨.');
},
onVerticalDragUpdate() {
print('수직으로 드래그하는 동안 위치가 업데이트 될때마다 실행.');
},
onVerticalDragEnd() {
print('수직으로 드래그가 끝났을 때.');
},
onScaleStart() {
print('확대가 시작됨.');
},
onScaleUpdate() {
print('확대가 진행되는 동안 위치가 업데이트 될때마다 실행.');
},
onScaleEnd() {
print('확대가 끝났을 때.');
},
child: Container(
decoration: BoxDecoration(
Color: Colors.red,
),
width: 100.0,
height: 100.0,
),
)
2-4. FloatingActionButton 위젯
- 화면의 오른쪽 아래에 동그란 플로팅 작업 버튼 구현.
import 'package:flutter/material.dart'
void main() {
runApp(FloatingActionButtonExample());
}
class FloatingActionButtonExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MateralApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){},
child: Text('클릭'),
),
body: Container(),
),
);
}
}
3. 디자인 관련 위젯
- 배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적인 요소를 적용
3-1. 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,
)
3-2. SizedBox 위젯
- 일반적으로 일정 크기의 공간을 공백으로 두고 싶을 때 사용
- Container 위젯을 사용해도 공백을 만들 수 있지만 SizedBox 는 const 생성자를 사용했을 때 성능상의 이점을 얻을 수 있음.
SizedBox(
height: 200.0,
width: 200.0,
// 크기를 확인하는 예제로 Container 추가.
child: Container(
color: Colors.red,
),
)
3-3. Padding 위젯
- child 위젯에 여백을 제공할 때 사용
- Padding 위젯의 상위 위젯과 하위 위젯 사이의 여백을 둘 수 있음.
Container(
color: Colors.blue,
child: Padding(
padding: EdgeInsets.all(
16.0,
),
child: Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
),
)
Margin 과 Padding 같이 사용하는 예제
// 최상위 Container : margin 이 적용되는 대상)
Container(
color: Colors.black,
child: Container(
color: Colors.blue,
// margin 적용 위치
margin: EdgeInsets.all(16.0),
// padding 적용
child: Padding(
padding: EdgeInsets.all(16.0),
// padding 이 적용된 Container
child: Container(
color: Colors.red,
width: 50,
height: 50,
),
),
),
)
3-4. SafeArea 위젯
- 기기별로 예외 처리를 하지 않고도 안전한 화면에서만 위젯을 그릴 수 있음.
SafeArea(
// true 이면 적용 : 안전한 영역만 사용(노치 영역을 사용하지 않음)
// false 이면 미적용: 안전하지 않은 영역까지 사용(노치 영역을 고려하지 않고 사용)
top: true,
bottom: true,
left: true,
right: true,
child: Container(
color: Colors.red,
height: 300.0,
width: 300.0,
),
)
4. 배치 관련 위젯
- 하위 위젯을 가로 또는 세로로 배치하거나 위젯 위에 위젯을 겹칠 때 사용
4-1. Row 위젯
- 가로로 위젯을 배치
- 여러개의 child 위젯을 입력 받을 수 있는 children 매개변수 사용.
import 'package:flutter/material.dart';
class RowWidgetExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: 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,
),
],
),
),
),
);
}
}
4-2. Column 위젯
- 세로로 위젯을 배치
import 'package:flutter/material.dart';
class ColumnWidgetExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
// 주축 정렬 지정
mainAxisAlignment: MainAxisAlignment.start,
// 반대축 정렬 지정
crossAxisAlignment: CrossAxisAlignment.start,
// 넣고 싶은 위젯 입력
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,
),
],
),
),
),
);
}
}
4-3. Flexible 위젯
- Row 나 Column 에서 사용하는 위젯.
- Flexible 에서 제공된 child 크기를 최소한으로 차지하게 함.
import 'package:flutter/material.dart';
class FlexibleWidgetExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
children: [
Flexible(
// flex는 남은 공간을 차지할 비율을 의미합니다.
// flex값을 값을 제공하지 않으면 기본값은 1입니다.
flex: 1,
// 파란색 Container
child: Container(
color: Colors.blue,
),
),
Flexible(
flex: 1,
// 빨간색 Container
child: Container(
color: Colors.red,
),
)
],
),
),
),
);
}
}
4-4. Expanded 위젯
- Flexible 위젯을 상속하는 위젯.
- Expanded 를 사용하면 위젯이 남아있는 공간을 최대한으로 차지.
import 'package:flutter/material.dart';
class ExpandedWidgetExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
children: [
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Container(
color: Colors.red,
),
)
],
),
),
),
);
}
}
4-5. Stack 위젯
- 위젯을 겹치는 기능
- 플러터의 그래픽 엔진인 스키아 엔진은 2D 엔진이기 때문에 겹친 두께를 표현하지는 못하지만 Stack 위젯을 사용하면 위젯 위에 위젯을 올린 듯한 효과를 줄 수 있음.
import 'package:flutter/material.dart';
class StackWidgetExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Stack(
children: [
Container(
height: 300.0,
width: 300.0,
color: Colors.red,
),
Container(
height: 250.0,
width: 250.0,
color: Colors.yellow,
),
Container(
height: 200.0,
width: 200.0,
color: Colors.blue,
),
],
),
),
),
);
}
}
