06 기본 위젯 알아보기
6.1 위젯 소개
위젯은 현재 주어진 상태(데이터)를 기반으로 어떤 UI를 구현할지를 정의한다.
위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다. 이때 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI 변화에 최소한의 변경사항을 산출해 그려낸다. (즉 퍼포먼스가 높음)
자식을 하나만 갖는 대표적인 위젯 (대체로 child 입력받음)
- Container : 자식을 담는 컨테이너
- GestureDetector : 제스처 기능을 자식 위젯에서 인식
- SizedBox : 높이와 너비 지정
다수의 자식을 입력할 수 있는 대표적인 위젯 (children 입력받음, 리스트로 여러 위젯 입력 가능)
- Column / Row : children들을 세로 / 가로로 배치
- ListView : 리스트 구현에 사용. 위젯이 화면을 벗어나면 스크롤이 가능해짐
6.1.1 Children과 Child의 차이점
플러터는 위젯 아래에 계속 위젯이 입력되는 형태로 '위젯 트리'를 구성해 UI를 제작한다.
child는 위젯을 하나만 추가할 수 있고 children은 여럿을 추가할 수 있다. 둘을 동시에 입력받는 위젯은 존재하지 않는다.
6.3 텍스트 관련 위젯
Text : 글자를 적고 스타일링하는 위젯.
- 1번째 포지셔널 파라미터에 원하는 문자열 작성
- style을 사용해 스타일 지정 (글자스타일: TextStyle())
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text(
'아보카도',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w700,
color: Colors.blue),
),
),
),
);
}
}
6.4 제스처 관련 위젯
제스처 : 사용자가 키보드를 글자를 입력하는 행위 외의 모든 입력. 탭, 길게 터치 등
6.4.1 Button 위젯
머티리얼 패키지에서 기본 제공하는 버튼. 누르면 색이 변경되는 리플 효과 지원
TextButton : 텍스트만 있는 버튼
OutlinedButton : 테두리가 있는 버튼
ElevatedButton : 입체적으로 튀어나온 느낌의 배경이 들어간 버튼
OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
foregroundColor: Colors.red,
),
child: Text('Outlined Button'),
)
OutlinedButton 부분(style도)만 TextButton, ElevatedButton으로 변경하면 다른 버튼 적용됨
6.4.2 IconButton 위젯
아이콘을 버튼으로 생성하는 위젯. icon에 보여주고 싶은 아이콘을 지정. 아이콘은 Icons 클래스를 통해 플러터에서 제공하는 기본 아이콘을 사용할 수 있다.
IconButton(
onPressed: () {},
icon: Icon(
Icons.home,
),
)
6.4.3 GestureDetector 위젯
손가락으로 하는 여러 입력을 인지하는 위젯.
child 위젯 (여기서는 컨테이너) 에 들어오는 제스처를 인지한다.
* GestureDetector가 제공하는 중요한 제스처
onTap 한번 탭
onDoubleTap 두번 연속 탭
onLongPress 길게 누르기
onPanStart 수평 or 수직으로 드래그가 시작
onPanUpdate 수평 or 수직으로 드래그하는 동안 드래그 위치가 업데이트될 때마다
onPanEnd 수평 or 수직으로 드래그가 끝
onHorizontalDragStart/Update/End 수평 드래그 관련
onVerticalDragStart/Update/End 수직 드래그 관련
onScaleStart 확대 시작
onScaleUpdate 확대 진행중에 확대가 업데이트될 때마다
onScaleEnd 확대 끝
6.4.4 FloatingActionButton 위젯
머티리얼 디자인에서 추구하는 버튼 형태. 오른쪽 아래 동그란 플로팅 작업 버튼을 쉽게 구현할 수 있다.
6.5 디자인 관련 위젯
6.5.1 Container 위젯
다른 위젯을 담는 데 사용하는 위젯. 너비와 높이를 지정하고나, 배경이나 테두리를 추가할 때 많이 사용
6.5.2 SizedBox 위젯
일정 크기의 공간을 공백으로 두고 싶을 때 사용
6.5.3 Padding 위젯
child 위젯에 여백을 제공할 때 사용. 적용된 위젯이 차지하는 크기 내부에서 간격이 추가된다. Padding 위젯의 상위 위젯과 하위 위젯 사이의 여백을 둘 수 있다.
padding 매개변수는 EdgeInsets 값을 받는다.
마진은 따로 위젯은 존재하지 않고 Container 위젯에 속성으로 추가할 수 있다. 마찬가지로 EdgeInsets를 받는다.
* EdgeInsets 클래스 생성자
all 상하좌우로 균등하게 적용
symmetric(horizontal: 16, vertical: 16) 가로와 세로 패딩 따로 적용
only(top: 16, bottom: 16, left: 16, right: 16) 위/아래/좌/우 패딩 따로 적용
fromLTRB(16, 16, 16, 16) 좌, 위, 우, 아래 순서로 패딩 따로 적용
6.5.4 SafeArea
기기별로 예외처리를 하지 않고도 안전한 화면에서만 위젯을 그릴 수 있게 해주는 위젯
top / bottom / left / right로 원하는 부위 적용가능. true면 적용, false면 미적용
child를 받는다.
6.6 배치 관련 위젯
하위 위젯을 가로 or 세로로 배치하거나, 위젯 위에 위젯을 겹칠 때 사용
6.6.1 Row 위젯
children 위젯들을 가로로 배치. 가로가 주축(main axis), 세로가 반대축(cross axis)
class RowExample extends StatelessWidget{
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, width: 50,
color: Colors.red,
),
const SizedBox(width: 12),
Container(
height: 50, width: 50,
color: Colors.green,
),
const SizedBox(width: 12),
Container(
height: 50, width: 50,
color: Colors.blue,
),
],
),
),
),
);
}
}
6.6.2 Column 위젯
사용 방법 동일. 단 주축이 세로, 반대축이 가로로 Row와 반대
* 정렬 옵션
start 시작에 정렬
center 중앙에 정렬
end 끝에 정렬
spaceBetween 자식 위젯의 간격을 균등하게 정렬 (끝에는 간격x)
spaceAround 자식 위젯의 간격을 균등하게 배정하고, 왼쪽 끝과 오른쪽 끝은 위젯 사이 거리의 반만큼 배정
spaceEvenly 자식 위젯의 간격을 균등하게 배치하고 왼쪽 끝과 오른쪽 끝도 균등하게 배치
stretch 최대한으로 늘려서 정렬 (반대축에서 사용)
6.6.3 Flexible 위젯
Row나 Column에서 사용하는 위젯. (children에 지정)
Flexible에 제공된 child가 크기를 최소한으로 차지하게 할 수 있다.
추가적으로 flex 매개변수를 이용해 각 Flexible 위젯이 차지할 공간의 비율을 지정할 수도 있다.
6.6.4 Expanded 위젯
Flexible 위젯을 상속하는 위젯으로, 남아 있는 공간을 최대한으로 차지
Flexible의 fit 매개변수에 FlexFit.tight를 기본으로 제공한 위젯. (반대: FlexFit.loose)
6.6.5 Stack 위젯
위젯끼리 겹치는 기능 제공. 위젯 위에 위젯을 올린 듯한 효과
children에 위치한 순서대로 위젯을 겹치게 한다.
