플러터 위젯

위젯이란?

"Everything is a Widget"은 구글이 플러터를 소개할 때 자주 사용하는 문구이다.

이는 한국어로 "모든 것은 위젯이다"라고 직역할 수 있다.

이 문구는 플러터의 핵심 철학을 잘 나타내고 있다.

 

플러터에서 위젯의 중요성:

1. UI 구성: 화면에 보이는 모든 UI 요소는 위젯으로 구성된다.
2. 상태 기반 UI: 위젯은 현재의 상태(state, 즉 데이터)를 기반으로 UI를 정의한다.
3. 동적 UI 업데이트: 위젯의 상태가 변경되면, 플러터는 자동으로 UI를 업데이트한다.

플러터의 효율적인 UI 업데이트 방식:

1. 차이점 비교: 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교한다.
2. 최소 변경: UI 변화를 반영할 때 필요한 최소한의 변경 사항만을 계산한다.
3. 효율적인 렌더링: 계산된 최소 변경사항만을 실제 화면에 그려낸다.

이러한 방식의 장점:

1. 리소스 효율성: 최소한의 리소스로 UI 변경을 구현할 수 있다.
2. 높은 성능: 쉽게 최대 120FPS(초당 프레임 수)까지 구현할 수 있어, 매우 부드러운 애니메이션과 전환 효과를 제공할 수 있다.

 

단일 자식 위젯 vs 다중 자식 위젯

플러터의 위젯은 크게 두 가지 유형으로 나눌 수 있다:

 

1. 단일 자식 위젯 (Single Child Widgets):

• 특징: 하나의 자식 위젯만을 가질 수 있다.
• 일반적으로 'child' 매개변수를 사용한다.

주요 예시:

 

Container 위젯:

• 역할: 자식 위젯을 담는 컨테이너 역할
• 특징: 배경색, 크기(너비와 높이), 테두리 등의 스타일링 가능

GestureDetector 위젯:

• 역할: 자식 위젯에 제스처 기능 추가
• 특징: 탭, 드래그, 더블 클릭 등의 제스처 인식 시 특정 함수 실행 가능

 

SizedBox 위젯:

• 역할: 특정 크기의 공간 생성
• 특징: Container보다 간단하며, const 생성자 사용 가능으로 성능상 이점 있음

 

 

2. 다중 자식 위젯 (Multi-Child Widgets):

• 특징: 여러 개의 자식 위젯을 가질 수 있다.
• 일반적으로 'children' 매개변수를 사용하며, 위젯 리스트를 입력는다.

주요 예시:

 

Column 위젯:

• 역할: 자식 위젯들을 세로로 배치

 

Row 위젯:

• 역할: 자식 위젯들을 가로로 배치

 

ListView 위젯:

• 역할: 스크롤 가능한 리스트 생성
• 특징: 화면을 벗어나는 위젯들에 대해 자동으로 스크롤 기능 제공

 

 

위젯 트리 (Widget Tree)

위젯 트리는 플러터 애플리케이션의 UI 구조를 시각적으로 표현한 것이다.

이는 위젯들이 어떻게 중첩되고 구성되는지를 보여준다.

플러터 개발자는 이 위젯 트리를 머릿속으로 그릴 수 있어야 효과적인 UI 설계와 구현이 가능하다.

 

 

Children와 Child의 차이점

플러터에서 UI 구성은 위젯 트리 형태로 이루어진다.

 

이때 상위 위젯에 하위 위젯을 추가하는 방식으로 'child'와 'children' 매개변수를 사용한다.

 

주요 차이점:

1. child: 단일 위젯만 추가 가능
2. children: 여러 위젯을 리스트 형태로 추가 가능

참고사항:

• 대부분의 위젯은 child 또는 children 중 하나만 제공한다.
• child와 children을 동시에 사용하는 위젯은 없다.

 

예제 1: child 사용 (단일 자식)

실행 결과

이 예제에서 Center 위젯의 child 매개변수에는 단 하나의 Text 위젯만 입력되어 있다.

 

예제 2: children 사용 (다중 자식)

실행 결과

이 예제에서는 Column 위젯의 children 매개변수에 두 개의 Text 위젯이 리스트 형태로 입력되어 있다.

이로 인해 'Hello'와 'World'가 세로로 배치되어 화면에 표시된다.