Today I Learned 6회차(2) - [플루터] 기본 위젯 알아보기

3 분 소요

다트 강의와 별개로 “[Must Have] 코드팩토리의 플러터 프로그래밍(3판)” 책을 읽으면서 플루터 개발에 관련된 내용을 추가로 정리를 진행합니다.

기본 위젯 알아보기

플루터 구조 살펴보기

플러터 프레임워크는 세 계층으로 나눠져 있습니다.

임베더 계층
엔진 계층
프레임워크 계층
- 위젯
- 애니메이션
- 머티리얼 패키지
- 쿠퍼티노

MeterialApp: 머티리얼 디자인 기반의 위젯들을 사용
Scaffold는 MaterialApp 위젯 다음으로 위치하는 위젯으로 화면 전체를 차지하며 1) 레이아웃을 도와주고 UI 관련 특수 기능을 제공
- 화면에 알림과 같은 스낵바
- 화면의 위에 앱바
- 화면 하단의 탭바

플루터에 대한 소개는 “모든 것은 위젯이다”라는 문구에서 확인할 수 있습니다.

위젯은 자식을 하나만 갖는 위젯과 자식을 여럿 갖는 위젯응로 나뉩니다.

자식을 하나만 갖는 위젯

Container:
- 자식을 담는 컨테이너 역할
- 배경색, 너비와 높이, 테두리 등을 디자인 가능
GestureDetector:
- 제스처 기능을 자식 위젯에서 인식하는 위젯
- 탭, 드래그, 더블 클릭 등
SizedBox:
- 높이와 너비를 지정하는 위젯
- const 생성자로 선언할 수 있어 퍼포먼스 측면에서 효율적

다수의 자식을 갖는 위젯

Colume: children에 입력된 모든 위젯들을 세로로 배치
Row: children에 입력된 모든 위젯들을 가로로 배치
ListView: children 매개변수에 다수의 위젯을 입력할 수 있음, 화면을 벗어나면 스크롤 가능

텍스트 관련 위젯

Text

제스처 관련 위젯

Button 위젯

아래 3개 버튼 모두 버튼을 누르면 색이 변경되는 리플 효과를 지원

TextButton: 텍스트만 있는 버튼
OutlinedButton: 테두리가 있는 버튼
Elevated Button: 입체적으로 튀어나온 느낌의 배경이 들어간 버튼

IconButton

아이콘을 버튼으로 생성하는 위젯

body: Center(
  child: IconButton(onPressed: () {}, icon: Icon(Icons.home)),
),

GestureDetector 위젯

손가락으로 하는 여러 가지 입력을 인지하는 위젯

onTap
onDouble
onLongPress
onPanStart: 수평 또는 수직으로 드래그가 시작됐을 때
onPanUpdate: 수평 또는 수직으로 드래그를 하는 동안 드래그 위치가 업데이트 될때마다 실행되는 함수 입력
onPanEnd: 수평 또는 수직으로 드래그가 끝났을 때 실행되는 함수 입력
onHorizonDragStart: 수평으로 드래그를 시작했을 때 실행되는 함수
onHorizonDragUpdate: 수평으로 드래그를 하는 동안 위치가 업데이트 될 때마다 실행
onHorizontalDragEnd:
onScaleStart: 확대가 시작됐을 때 실행되는 함수를 입력
onScaleUpdate: 확대가 진행되는 동안 확대가 업데이트될 때마다 실행되는 함수를 입력
onScaleEnd: 확대가 끝났을 때 실행되는 함수를 입력

FloatingActionButton

Material Design에서 추구하는 버튼 형태
스크린에서 가장 주요하거나 공통되는 기능을 수행하는 버튼으로 오른쪽 하단에 해당 버튼이 존재한다.

home: MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Text("data"),
    ),
    body: Container(),
  ),
)

디자인 관련 위젯

Container 위젯

다른 위젯을 담는 용도로 사용하는 위젯이다. 위젯의 너비와 높이를 지정하거나, 배경이나 테두리를 추가할 때 많이 사용된다.

body: Container(
  decoration: BoxDecoration(
    // 배경색
    color: Colors.red,
    // 테두리 적용
    border: Border.all(
      // 테두리 굵기
      width: 16.0,
      // 테두리 색상
      color: Colors.black,
    ),
    // 모서리 둥글게 만들기
    borderRadius: BorderRadius.circular(16.0),
  ),
  height: 200,
  width: 100,
),

SizedBox 위젯

일정 크기의 공간을 공백으로 두고 싶을 때 사용합니다.

Padding 위젯

child 위젯에 여백을 제공할 때 사용합니다. Padding 위젯은 상위 위젯과 하위 위젯 사이의 여백을 둘 수 있습니다.

EdgeInsets

all: 상하좌우 여백
symmetric(horizontal: , vertical: ): 가로, 세로 패딩을 따로 적용
only: 상하좌우 각각 적용

SafeArea

노치가 있는 핸드폰에서 노치에 위젯들이 가릴 수 있습니다. 이때 SafeArea 위젯을 사용하면 기기별로 예외처리를 하지 않아도 안전한 화면에서만 위젯을 그릴 수 있습니다.

child: SafeArea(
  // 원하는 부위만 따로 적용할 수도 있습니다.
  top: true,
  bottom: true,
  left: true,
  right: true,
  child: Container(
    color: Colors.red,
    height: double.infinity,
    width: double.infinity,
  ),
),

배치와 관련된 위젯

Row & Column위젯

주축과 반대축이라는 개념이 존재합니다. 주축과 반대축을 어떻게 조합하느냐에 따라 Row와 Column 위젯을 이용해서 다양하게 배치할 수 있습니다.

MainAxixAlignment와 CrossAxixAlignment 변경

MainAxixAlignment(주축)

start: 시작에 정렬
center: 중앙에 정렬
end: 끝에 정렬
spaceBetween: 자식 위젯의 간격을 균등하게 정렬
spaceAround: 자식 위젯 간의 간격을 균등하게 배정하고 왼쪽 끝과 오른쪽 끝을 위젯 사이 거리의 반만큼 배정해 정렬
spaceEvenly: 자식 위젯의 간격을 균등하게 배치하고 왼쪽 끝과 오른쪽 끝도 균등하게 배치

CrossAxixAlignment(반대축)

start: 시작에 정렬
center: 중앙에 정렬
end: 끝에 정렬
stretch: 반대축 최대한으로 늘려서 정렬

body: SizedBox(
  height: double.infinity,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start, // 주축
    crossAxisAlignment: CrossAxisAlignment.center, // 반대축
    children: [
      Container(height: 50.0, width: 50.0, color: Colors.red),
      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에서 사용하는 위젯입니다. Row나 Column에서 사용하면 Flexible에서 제공된 child가 크기를 최소한으로 차지하게 할 수 있습니다.

추가적으로 flex 매개변수를 이용해 각 Flexible 위젯이 얼만큼의 비율로 공간을 차지할지 지정할 수도 있습니다.

child: Column(
  children: [
    Flexible(flex: 3, child: Container(color: Colors.blue)),
    Flexible(flex: 1, child: Container(color: Colors.red)),
  ],
),

Expanded 위젯

Expanded 위젯은 Flexible 위젯을 상속하는 위젯입니다. fit 매개변수에 FlexFit.tight(자식 위젯이 차지하는 공간과 관계 없이 남은 공간을 모두 차지) 또는 FlexFit.loose(자식 위젯이 필요한 만큼의 공간을 차지)를 입력할 수 있습니다(실제로는 존재x).

flex 매개 변수의 값에 따라 변경됩니다.

Stack 위젯

Stack 위젯은 위젯을 겹치는 기능을 제공해 줍니다. 위젯 위에 위젯을 올린 듯한 효과를 줄 수 있습니다.

Twitter Facebook LinkedIn

joseph.c