| <colbgcolor=#fff,#1f2023><colcolor=#075B9D,#60C9F8> 플러터 Flutter | |
| | |
| 분류 | 애플리케이션 프레임워크 |
| 개발 | |
| 안정화 최신 버전 | 3.19.6 - 2024년 4월 18일 # |
| | |
[clearfix]
1. 개요
구글에서 2017년 5월 출시되었으며 Skia/Impeller를 렌더링 엔진으로 사용하는 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. 하나의 코드 베이스로 안드로이드, 리눅스, Windows, macOS, iOS 및 웹 브라우저에서 모두 동작되는 앱을 위해 출시되었다. 사용되는 언어는 역시 구글에 의해 제창된 Dart를 사용한다.플러터 웹 앱의 브라우져에서 렌더링은 HTML renderer 모드 또는 CanvasKit renderer 모드가 사용된다. HTML renderer는 HTML 엘리먼트, CSS, 캔버스 엘리먼트 및 SVG 엘리먼트가 사용되어 브라우져 캔버스상에 그려진다. CanvasKit renderer는 Skia를 WASM(WebAssembly)로 컴파일한 모듈과 WebGL을 사용하여 표시된다.
빌드된 플러터 웹 앱을 기존 HTML 페이지의 풀윈도우, iframe, 또는 임의의 html element에 임베딩을 지원한다. Javascript과의 상호연동과 통신도 가능하다. 플러터의 웹 지원은 다트 언어 및 플러터 패키지를 자바스크립트로 컴파일 되어 웹 브라우저 상에서 실행되며 WebAssembly로 직접 컴파일도 지원하기 시작했다. 참고로, flutter 패키지 사용없이 dart로 작성된 프로그램을 자바스크립트로 컴파일하여 리거시 HTML/CSS와 연동하여 사용도 가능하다.
데스크톱 상에서의 플러터 앱 실행은 2021년 3월부터 공식적으로 지원되고 있다. 구글의 차기 운영체제인 퓨시아의 유저 인터페이스 및 퓨시아 애플리케이션 역시 플러터로 작성된다.
플러터 프레임워크는 소스 코드를 네이티브 CPU 머신 코드로 직접 컴파일하며 GUI를 위해 각 OS의 네이티브 Widget/UI 컴포넌트로 변환하지 않고 렌더링 엔진 Skia/Impeller로 직접 드로잉하기 때문에 성능이 뛰어나다. 어느 OS에서나 Material 또는 Cupertino등의 테마 적용이 가능하며 테마(Theme) 커스텀도 가능하다. CustomPaint등으로 커스텀 위젯 작성도 가능하다.
2. 특징
Flutter는 리액티브 프레임워크 프로그래밍 기법으로 제작되었다. 선언형(declarative) UI와 상태관리(state management)가 특징이다. State 클래스에는 화면 표시와 관련된 build() 메서드외에 특정조건에서만 실행되는 라이프사이클 매서드가 있다. UI 디자인을 Dart언어의 Widget을 사용하면 되므로 UI언어가 분리된 Java, C#, Javascript 계열의 개발과는 생산성 측면에서 비교 자체를 불허한다. 백엔드 지원에 있어서는 Appwrite나 Firebase등이 있으며 모바일 뿐아니라 웹 앱 분야에서도 강점을 가지고 있다.상태 관리는 기본적으로 StatefulWidget/setState 사용 및 컨스트럭터/콜백을 통한 데이터 up/down 전달이 가능하다. 본격적인 상태관리 및 MVC/MVVM를 위해서는 GetX, Provider/Riverpod, Bloc가 있으며 자신의 취향에 따라 선택하면 된다.
const외에 final이 있다. const는 compile time시 결정되며 final은 runtime시 결정된다. 차이점은 instance의 필드값 변경 가능 여부다. 상태관리시 필드값 변경이 필요하기 때문에 final이 많이 사용된다
주요 IDE로는 Android Studio와 VSCode가 있으나 안드로이드 에뮬레이터 가속 기능, 디버깅, 에디터 기능 등등 Android Studio가 압도하기에 Android Studio를 사용하는 경우가 많다. 참고로, 안드로이드 에뮬레이터 사용시 리눅스의 KVM과의 상성이 매우 좋기 때문에 성능을 위해서라면 Linux를 사용하것이 좋다. 플러터 학습에는 안드로이드 스튜디오 및 Material Design 테마가 쓰이는 경우가 많으며, Cupertino 테마는 학습량이 증가하기 때문에 Material 테마를 커스텀화 하여 사용하면된다.
2.1. 디자인 예시
Official showcaseIt's all widgets[1]
3. 상태 관리 라이브러리
3.1. GetX
스테이트 매니지먼트, 클래스 디펜던시 매니지먼트, 라우팅, 유틸등 강력한 기능이 있다. 2024년 pub.dev 라이크 순위 1위다. 상태관리 라이브러리중 가장 사용하기가 쉽고 문법이 간결하다. MVC/MVVM 아키텍쳐 구현도 하기 라이브러리에 비해 가장 쉽다고 할수 있다.3.2. BLoC
BLoC의 핵심 개념은 Flutter가 Vue처럼 상호간에 잘 연결된 UI 영역과 로직 영역의 직접 연결을 끊고 그 사이를 BLoC이 들어가 이벤트 기반으로 바꿔버리는 것이다. 산하 라이브러리로 Cubit이 있다. 학습 난이도가 가장 어렵다.3.3. Provider
InheritedWidget을 기반으로 만든 상태 관리 패키지. 그래서 Flutter의 boilerplate 코드 형태를 답습하고 있는 단점이 있다. BLoc에 비해서는 쉬우나 역시 코드가 간결하지가 않고 복잡하다.3.4. Riverpod
Provider의 제작자가 만든 Provider의 문제점을 개선한 상태 관리 라이브러리. 역시 복잡하다.3.5. Hooks
Provider, Riverpod 등을 관리하는 사람이 만든 라이브러리. State의 initState, didChangeDependencies, dispose를 useEffect 하나로 대체하고 있다. hooks는 주류 상태관리 라이브러리가 아니다.4. 외부 링크
유튜브 공식 Flutter 영상Flutter 공식 문서
Flutter SDK 다운로드
Flutter Packages - 플러터 라이브러리 패키지
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
Reddit FlutterDev
5. 도서
도서관 자료 목록 - 플러터 링크6. DartPad
Flutter SDK 를 설치하지 않아도 간단한 예제는 Web에서 코딩하고 바로 실행시킬 수 있다.DartPad
Sample
7. 백엔드
셀프 호스팅을 지원하는 AppWrite나 구글의 Firebase를 사용하는 대신 Dart 라이브러리를 사용한 백엔드 서버 앱 작성도 가능하다. 대표적으로 dart_frog와 get_server 라이브러리가 있다.[1] Flutter를 이용해 디자인한 앱들이 올라오고, 2022년초 이후 다수의 웹 앱 예제가 올라오고 있다. 오픈소스인 경우 소스를 볼 수 있다.