[Flutter/Dart] 입문 기본 상식(with. 소개, Widget, State, Provider)

 

 

 

 

728x90

 

 

 

 

 

 

Flutter란?

Google에서 개발 및 지원하는 오픈 소스 프레임워크

 

다수의 플랫폼에 대한 사용자 인터페이스(UI)를 단일 코드 베이스로 구축

 

iOS, Android, 웹, Windows, MacOS, Linux의 여섯 가지 플랫폼에 대한 애플리케이션 개발을 지원

 

Dart(객체지향)를 사용하고 기계 코드로 컴파일

** JIT컴파일, AOT컴파일 모두 지원
>> 따라서 핫 리로드, 핫 리스타트 기능 지원가능!
JIT(Just-In-Time) 컴파일 : 런타임 시 바이트 코드를 기계어로 번역, ex) Java, C#, Python
AOT(ahead-of-time)컴파일 : 실행 전(설치 시점)에 미리 기계어로 번역, ex) C, C++

 

플랫폼별 렌더링 도구를 사용하지 않고 자체 렌더링 엔진(Google의 오픈 소스 Skia 그래픽 라이브러리)을 사용하여 UI를 렌더링

** 즉 네이티브 플랫폼에게 렌더링 지시를 내릴 필요없음
>> 중간에 거쳐야할 다리가 없으므로 다른 크로스 플랫폼 보다 빠름

 

 

 

Widget이란?

Basic widgets

UI 레이아웃의 모든 요소

** 창과 패널부터 버튼과 텍스트에 이르기까지 사용자가 화면에서 보는 모든 요소가 위젯임
** 심지어 위치, 정렬, Text 스타일, 색상, 애니메이션까지

 

상태가 없는 위젯(StatelessWidget), 상태가 있는 위젯(StatefulWidget)
>> 크게 2종류로 나뉘어짐

 

위젯을 결합하거나 편집하여 새 위젯을 만들 수 있음

 

Flutter Apps | It's All Widgets!

여러 위젯 라이브러리를 적용하는 기능을 지원

 

Widget catalog

위젯 카탈로그에서 다양한 위젯 종류 확인 가능 (iOS 스타일의 Cupertino)

 

• Widget의 실행 방식

mian.dart 파일 > main 함수 > MyApp Widget > build 함수 > 내부의 수많은 위젯들...

** Stateless Widget의 경우 **
상태관리가 필요없으며 제거, 리빌드 시점이 외부로 부터 결정됨

** Stateful Widget의 경우 **
> Widget, State객체 2가지로 구성됨
> Cycle : 생성 -> createState -> initState -> dirty -> build -> clean
> setState를 호출해 상태를 변경할 경우 dirty로 상태가 변경되어 다시 build 수행

빌드하면 위젯트리를 만들어 부모 위젯부터 순차적으로 렌더링한다

setState를 호출하면 기존 위젯을 새 위젯으로 변경하고 플러터가 새 트리를 그리며 렌더링한다

부모에서 자식으로 한번 이동, 자식에서 거슬러올라오며 부모로 한번 이동한다

부모는 자식에게 제약조건을 알려주고, 자식은 부모에게 제약 조건에 맞는 크기 및 위치를 알려준다

 

 

 

Provider

위젯간의 상태를 공유 및 관리 위해 사용

 

[생성]
ChangeNotifier
> 데이터를 관리하고 리스너에게 변경을 알림
ChangeNotifierProvider
> 하위에 변경 받을 리스너 앱을 보유하고, ChangeNotifier를 생성해 인스턴스를 제공하는 위젯

 

[소비]
watch
> Provider의 변화를 감지해 데이터를 얻고 해당 메소드가 포함된 위젯을 재빌드
read
> Provider의 데이터를 읽고 변경할 수 있음(접근은 하지만 재빌드는 하지않음)
select
> watch와 유사하게 변화를 감지하고 위젯을 재빌드 하지만 Provider내의 특정 속성의 변화만을 감지할 수 있음

 

 

 

 

 

 

 

참고사이트

Flutter란 무엇인가요? - Flutter 앱 설명 - AWS

플러터의 동작 원리

[Flutter] Provider