#!if 넘어옴1 != null
'''플러터'''{{{#!if 넘어옴2 != null
, '''플루터'''}}}{{{#!if 넘어옴3 != null
, ''''''}}}{{{#!if 넘어옴4 != null
, ''''''}}}{{{#!if 넘어옴5 != null
, ''''''}}}{{{#!if 넘어옴6 != null
, ''''''}}}{{{#!if 넘어옴7 != null
, ''''''}}}{{{#!if 넘어옴8 != null
, ''''''}}}{{{#!if 넘어옴9 != null
, ''''''}}}{{{#!if 넘어옴10 != null
, ''''''}}}은(는) 여기로 연결됩니다. #!if 설명 == null && 리스트 == null
{{{#!if 설명1 == null
다른 뜻에 대한 내용은 아래 문서를}}}{{{#!if 설명1 != null
{{{#!html BEMANI 시리즈의 수록곡}}}에 대한 내용은 [[Flutter(BEMANI)]] 문서{{{#!if (문단1 == null) == (앵커1 == null)
를}}}{{{#!if 문단1 != null & 앵커1 == null
의 [[Flutter(BEMANI)#s-|]]번 문단을}}}{{{#!if 문단1 == null & 앵커1 != null
의 [[Flutter(BEMANI)#|]] 부분을}}}}}}{{{#!if 설명2 != null
, {{{#!html 만화 '헌터×헌터'의 등장인물}}}에 대한 내용은 [[후라타]] 문서{{{#!if (문단2 == null) == (앵커2 == null)
를}}}{{{#!if 문단2 != null & 앵커2 == null
의 [[후라타#s-|]]번 문단을}}}{{{#!if 문단2 == null & 앵커2 != null
의 [[후라타#|]] 부분을}}}}}}{{{#!if 설명3 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단3 == null) == (앵커3 == null)
를}}}{{{#!if 문단3 != null & 앵커3 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단3 == null & 앵커3 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명4 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단4 == null) == (앵커4 == null)
를}}}{{{#!if 문단4 != null & 앵커4 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단4 == null & 앵커4 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명5 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단5 == null) == (앵커5 == null)
를}}}{{{#!if 문단5 != null & 앵커5 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단5 == null & 앵커5 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명6 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단6 == null) == (앵커6 == null)
를}}}{{{#!if 문단6 != null & 앵커6 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단6 == null & 앵커6 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명7 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단7 == null) == (앵커7 == null)
를}}}{{{#!if 문단7 != null & 앵커7 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단7 == null & 앵커7 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명8 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단8 == null) == (앵커8 == null)
를}}}{{{#!if 문단8 != null & 앵커8 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단8 == null & 앵커8 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명9 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단9 == null) == (앵커9 == null)
를}}}{{{#!if 문단9 != null & 앵커9 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단9 == null & 앵커9 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명10 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단10 == null) == (앵커10 == null)
를}}}{{{#!if 문단10 != null & 앵커10 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단10 == null & 앵커10 != null
의 [[#|]] 부분을}}}}}}#!if 설명 == null
{{{#!if 리스트 != null
다른 뜻에 대한 내용은 아래 문서를}}} 참고하십시오.#!if 리스트 != null
{{{#!if 문서명1 != null
* {{{#!if 설명1 != null
BEMANI 시리즈의 수록곡: }}}[[Flutter(BEMANI)]] {{{#!if 문단1 != null & 앵커1 == null
문서의 [[Flutter(BEMANI)#s-|]]번 문단}}}{{{#!if 문단1 == null & 앵커1 != null
문서의 [[Flutter(BEMANI)#|]] 부분}}}}}}{{{#!if 문서명2 != null
* {{{#!if 설명2 != null
만화 '헌터×헌터'의 등장인물: }}}[[후라타]] {{{#!if 문단2 != null & 앵커2 == null
문서의 [[후라타#s-|]]번 문단}}}{{{#!if 문단2 == null & 앵커2 != null
문서의 [[후라타#|]] 부분}}}}}}{{{#!if 문서명3 != null
* {{{#!if 설명3 != null
: }}}[[]] {{{#!if 문단3 != null & 앵커3 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단3 == null & 앵커3 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명4 != null
* {{{#!if 설명4 != null
: }}}[[]] {{{#!if 문단4 != null & 앵커4 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단4 == null & 앵커4 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명5 != null
* {{{#!if 설명5 != null
: }}}[[]] {{{#!if 문단5 != null & 앵커5 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단5 == null & 앵커5 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명6 != null
* {{{#!if 설명6 != null
: }}}[[]] {{{#!if 문단6 != null & 앵커6 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단6 == null & 앵커6 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명7 != null
* {{{#!if 설명7 != null
: }}}[[]] {{{#!if 문단7 != null & 앵커7 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단7 == null & 앵커7 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명8 != null
* {{{#!if 설명8 != null
: }}}[[]] {{{#!if 문단8 != null & 앵커8 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단8 == null & 앵커8 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명9 != null
* {{{#!if 설명9 != null
: }}}[[]] {{{#!if 문단9 != null & 앵커9 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단9 == null & 앵커9 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명10 != null
* {{{#!if 설명10 != null
: }}}[[]] {{{#!if 문단10 != null & 앵커10 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단10 == null & 앵커10 != null
문서의 [[#|]] 부분}}}}}}| <colcolor=#075B9D,#60C9F8> 플러터 Flutter | |
| | |
| 종류 | GUI 프레임워크 |
| 개발 | 구글 및 커뮤니티 |
| 안정화 최신 버전 | 3.29.2 - 2025년 3월 14일 # |
| | |
1. 개요
구글에서 2017년 5월 출시된 Skia/Impeller를 렌더링 엔진으로 사용하는 모바일/웹/데스크톱 크로스플랫폼 GUI 프레임워크. 하나의 코드베이스로 Android, Linux, Windows, macOS, iOS 및 웹 브라우저에서 모두 동작되는 앱을 위해 출시되었다. 사용되는 언어는 역시 구글의 Dart를 사용한다.데스크톱상에서의 플러터 앱 실행은 2021년 3월부터 공식적으로 지원되고 있다. 구글의 또 다른 운영 체제인 퓨시아의 UI 및 퓨시아 애플리케이션 역시 플러터로 작성된다. iOS/macOS, Android 에서 Impeller 렌더러를 사용 가능하다. 윈도우에서는 OpenGL API 콜을 DirectX11로 변환하는 ANGLE 라이브러리가 사용되어 렌더링되었다.
플러터 프레임워크는 소스 코드를 네이티브 CPU 머신 코드로 직접 컴파일하며 GUI를 위해 각 OS의 네이티브 UI 컴포넌트로 변환하지 않고 렌더링 엔진 Skia/Impeller로 직접 드로잉하기 때문에 성능이 뛰어나다. OS에 관계없이 안드로이드의 Material 디자인, macOS/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. 플러터 웹
| | |
| default모드 : 자바스크립트로 컴파일 및 canvaskit.wasm 렌더러 사용 | webassembly모드: 웹어셈블리로 컴파일 및 skwasm 렌더러 사용 |
빌드된 플러터 웹 앱을 기존 HTML 페이지의 풀 윈도우, iframe, 또는 임의의 html element에 임베딩을 지원하고 있다. package:web을 사용하여 리거시 HTML/CSS와 연동하여 사용도 가능하다.
4. 상태 관리 라이브러리
4.1. GetX
스테이트 매니지먼트, 클래스 디펜던시 매니지먼트, 라우팅, 유틸등 강력한 기능과 함께 code bloat가 없으며 사용 난이도가 가장 쉽다는 장점이 있다. 그로 인해 2024년 pub.dev 라이크 순위 1위다. MVC/MVVM 아키텍처 구현도 가장 쉽다.4.2. BLoC
BLoC의 핵심 개념은 UI 영역과 로직 영역의 직접 연결을 끊고 그 사이를 BLoC이 들어가 이벤트 기반으로 바꿔버리는 것이다. 산하 라이브러리로 Cubit이 있다. 학습 난이도가 가장 어렵다.4.3. Provider
InheritedWidget을 기반으로 만든 상태 관리 패키지. 그래서 Flutter의 boilerplate 코드 형태를 답습하고 있는 단점이 있다. BLoc에 비해서는 쉬우나 역시 구조가 간결하지 않고 복잡하다.4.4. Riverpod
Provider의 제작자가 만든 Provider의 문제점을 개선한 상태 관리 라이브러리. Provider의 가장 큰 문제였던 BuildContext를 참조할 수 없는 스코프에선 상태 관리가 불가능하다는 문제와 Provider 사용자들을 항상 괴롭혀 왔던 위젯 트리 탐색 문제를 해결한 라이브러리이다. 그러나 학습 곡선과 코드는 Provider에 비해 더 복잡하다. 모든 프로젝트에 Riverpod가 필요한 것은 아니기에 간단한 프로젝트라면 Provider로 구현해도 큰 문제는 없다. 권장되지는 않지만 하술할 Hooks 또한 Riverpod와 같이 쓰는 것 또한 가능하다.Riverpod라는 이름은 Provider의 애너그램이다.
4.5. Hooks
Provider, Riverpod 등을 관리하는 사람이 만든 라이브러리. State의 initState, didChangeDependencies, dispose를 useEffect 하나로 대체하고 있다. 사용해 보면 편리하긴 하지만 hooks는 주류 상태 관리 라이브러리가 아니며, 주로 provider를 보완하는 용도로 함께 사용된다.4.6. 기타
그 밖의 상태 관리 라이브러리 리스트는 플러터 공식 문서의 옵션을 참고 하자.5. 백엔드
구글이 운영하고 있는 Firebase 백엔드 서버의 서비스를 사용하는 대신 셀프 호스팅을 지원하는 백엔드 플랫폼인 AppWrite 또는 Supabase등의 사용도 가능하다. Dart 라이브러리를 사용하여 커스텀 백엔드 서버 앱 작성도 가능하며 dart_frog와 get_server등의 라이브러리를 이용하면 쉽다.6. 플러터 사용 예시
Official showcaseIt's all widgets, 2022년초 이후 다수의 웹 앱 예제가 제시되고 있다.
7. 외부 링크
유튜브 공식 Flutter 영상Flutter 공식 문서
Flutter SDK 다운로드
Flutter Packages - 플러터 라이브러리 패키지
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
Reddit FlutterDev
8. 도서
도서관 자료 목록 - 플러터 링크9. 웹 IDE
Flutter SDK를 로컬 PC에 별도 설치하지 않고도 간단한 예제를 웹 브라우저에서 코딩하고 바로 실행시킬 수 있다.DartPad와 Projec IDX가 있다.
Sample