0장. 플러터의 시작 - 위젯부터 시작해서 위젯으로 끝나는 플러터

 

플러터(Flutter)란?

 

플러터는 구글에서 개발한 오픈 소스로 공개한 프레임워크입니다.

웹 앱, 데스크톱 앱부터 안드로이드 앱, iOS앱까지 플러터 하나로 만들 수 있습니다.

크로스 플랫폼 개발의 지원이 매우 강점이며, 향후 앱 개발에서 주목받고 있는 프레임워크입니다.

플러터는 Dart라는 구글의 프로그래밍 언어를 사용합니다.

 

 

'모든 것이 위젯이다'

플러터는 위젯이라는 작은 요소를 조합하여 모바일 UI를 만듭니다.

위젯은 dart언어의 클래스 중 하나입니다.

다른 객체도 존재하지만, 대부분의 앱 개발에서는 위젯만을 사용합니다.

 

 

위젯은 두 가지가 있습니다:

StatelessWidget : 상태가 없는 위젯

StatefulWidget : 상태가 있는 위젯

이러한 위젯들로 트리를 구성하여 앱을 만듭니다.

 

 

플러터 앱의 위젯 트리 예시 중 하나입니다.(실제 스토어에 있는 앱들은 규모가 어마어마합니다)

외부에서 새 정보를 받으면 이에 반응하여, StatefulWidget이 변경되어 플러터가 새로운 위젯을 다시 그립니다.

플러터는 빠른 속도로 앱의 위젯 트리를 여러 번 재생성합니다.

처음 트리와 위젯을 생성할 때, 이를 ‘빌드(build)’라고 하고,

변경되어 새로운 위젯을 그릴 때에는 ‘리빌드’한다고 합니다.

 

플러터의 내부 동작 과정 🏗️

 

1. 위젯 트리와 레이아웃의 조립

플러터는 모든 위젯을 빌드하고, 위젯 트리를 만듭니다.

위젯 트리가 완성되면, 위젯 트리를 빠르게 탐색합니다.(선형 시간 소요)

트리를 탐색하면서, 위젯을 빠르게 탐색합니다.

트리를 내려갈 때는, 각 위젯의 위치 정보를 수집하고, 레이아웃과 크기 제약을 확인합니다.

트리를 거슬러 올라올때는, 위젯의 실제 크기와 위치 정보를 부모 위젯에 알립니다.

이렇게 서로의 관계를 파악하면서 최종 레이아웃을 정리합니다.

 

2. 조립 과정

 

각 위젯의 레이아웃을 확인하였으니, 위젯을 그리기 시작합니다.

화면에 픽셀을 나타내는 것이 아닌, 화면상의 좌표를 위젯에 제공하여 위젯은 자신의 위치를 알 수 있습니다.

예를 들면, 스크롤을 하는 페이지에서 화면에 보이지 않는 위치로 위젯이 이동했다가 다시 나온다고 해서,

위젯이 다시 빌딩 될 필요는 없다는 뜻입니다.

 

3. 화면에 그리기(래스터라이징)

 

플러터의 렌더링 엔진이 운영체제를 통해서 화면에 그리도록 요청합니다.