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