기획자의 앱 도전기 #2 - Flutter 기본 구성 요소

Flutter로 앱을 만들기 전에 기본 구성 요소가 무엇인지 알아보려고 한다. 하지만 나는 전문적인 개발자는 아니기 때문에, 너무 깊게 이해하려고 하진 않을 것이다.

 

Flutter의 핵심 위젯!

위젯이란 Flutter를 구성하는 UI의 기본 단위이다. Flutter에서는 모든 것이 위젯이라는 철학을 가지고 있기 때문에 위젯은 기본 구성 요소이면서도, 동시에 가장 중요한 개념이다. (React의 Component와 유사한 개념이다.)

위젯의 특징

1. 불변성 : 위젯은 생성된 후 변경할 수 없으며, UI를 변경하려면 새로운 위젯을 생성해야 한다.
2. 계층 구조 : 위젯은 트리 구조로 구성되며, 부모 위젯은 자식 위젯을 포함할 수 있다.
3. 선언적 UI : 현재 애플리케이션 상태에 따라 UI가 어떻게 보여야 하는지 선언적으로 정의한다.
4. 합성 : 작은 위젯들을 조합하여 복잡한 UI를 구성한다.

---

위젯의 트리 구조

Flutter의 UI는 기본적으로 3가지의 트리로 구성된다.

1. Widget Tree : 선언적인 UI 트리
2. Element Tree : 위젯 인스턴스를 유지하고 상태를 관리하는 트리
3. RenderObject Tree : 실제 레이아웃 계산 픽셀 렌더링하는 트리

 

허허, 이 말만 보면 무슨말인지 모르겠다.

쉽게 생각하면 Widget Tree는 설계도, Element Tree는 설계도로 만든 구조물, RenderObject Tree는 만들어진 구조물을 실체화하는 것이다. 그래서 Widget Tree는 불변성의 특징을 가지고, Element Tree는 상황에 따른 상태 변화 특징, RenderObject Tree는 실제 성능, 흔히들 말하는 렌더링 최적화에 관한 특징을 가지고 있다.

---

위젯의 생명 주기

Flutter의 위젯은 생성, 구성, 렌더링의 주기를 거친다.

1. 위젯 생성 : 위젯 클래스의 인스턴스가 생성됩니다.
2. 빌드 메서드 호출 : 위젯의 build() 메서드가 호출되어 위젯 트리를 구성한다.
3. 요소 트리 생성 : 위젯 트리를 기반으로 Element 트리가 생성되거나 업데이트된다.
4. RenderObject 생성 : Element 트리에 따라 RenderObject 트리가 생성되거나 업데이트된다.
5. 화면 렌더링 : RenderObject 트리를 기반으로 UI가 화면에 렌더링된다.
6. 위젯 상태 변경 : 상태 변경 시 위젯이 다시 빌드된다.

렌더링 과정
레이아웃 단계에서 부모 위젯이 자식 위젯에게 제약 조건을 전달하고, 자식 위젯은 자신의 크기를 결정한다. 이후 위젯의 외관을 렌더링하는 페인팅 단계를 거쳐 렌더링된 레이어들이 화면에 합성되는 합성 단계를 끝으로 렌더링이 종료된다.

---

위젯의 유형

위젯은 크게 두 가지의 유형으로 나뉜다.

1. Stateless 위젯 : 불변의 상태로 생성 후 UI가 절대 바뀌지 않아 단순한 버튼, 텍스트로 작성하는 정적인 UI
2. Stateful 위젯 : 상태를 가지고 있어 setState()를 호출하면 UI가 자동으로 빌드되어 상태에 맞게 변경되는 동적인 UI

Flutter 기본 위젯 분류

구조적 위젯	애플리케이션의 구조를 정의하는 위젯 MaterialApp : Material Design 앱의 진입점 CupertinoApp : iOS 스타일 앱의 진입점 Scaffold : 기본 앱 구조 제공(앱바, 드로워, 바텀 시트 등) AppBar : 앱 상단의 앱 바
시각적 위젯	화면에 콘텐츠를 표시하는 위젯 Text : 텍스트 표시 Image : 이미지 표시 Icon : 아이콘 표시 Card : 둥근 모서리와 그림자가 있는 카드
레이아웃	위젯들을 배치하고 정렬하는 위젯 Container : 패딩, 마진, 배경색, 크기 등을 설정할 수 있는 범용 컨테이너 Row/Column : 위젯을 가로/세로로 배열 Stack : 위젯들을 겹쳐서 배치 ListView : 스크롤 가능한 목록
입력	사용자 입력을 받는 위젯 TextField : 텍스트 입력 Checkbox : 체크박스 Radio : 라디오 버튼 Slider : 슬라이더
상호작용	사용자 상호작용을 처리하는 위젯 GestureDetector : 다양한 제스처 인식 InkWell : 터치 효과가 있는 영역 Draggable : 드래그 가능한 위젯
애니메이션	애니메이션 효과를 제공하능 위젯 AnimatedContainer : 속성 변경 시 애니메이션 효과 Hero : 화면 전환 시 애니메이션 효과 FadeTransition : 페이드 인/아웃 효과

위젯의 제약 조건

Flutter의 레이아웃 시스템은 부뫃 위젯이 자식 위젯에게 제약 조건을 전달하고, 자식 위젯은 이 제약 조건 내에서 자신의 크기를 결정하는 방식으로 작동한다. 제약조건은 최소/최대 너비와 높이로 구성되며, 자식 위젯은 이 범위 내에서 크기를 결정한다.

---

결론

Flutter의 위젯을 공부하면서 느끼지만, 개발은 사용하는 방식만 다르지. 근본적인 개발은 비슷한 것 같다. 그래서 Java와 Spring을 공부했을 때 배웠던 개념이나, 웹 퍼블리싱 공부를 할 때 배웠던 개념들 덕분에 이해하는데 도움이 많이 되었다. 이제 이 위젯들로 어떻게 화면이 구성되는지 직접 해보고 앱 하나를 지정해서 클론코딩으로 공부해보려 한다.

 

출처

https://changjoo-park.github.io/learn-flutter/part3/widgets/

위젯 개념과 주요 위젯

https://chatgpt.com/g/g-6DQc8zeTA-flutter-expert

ChatGPT - Flutter Expert