Flutter(프레임워크)

만화 '헌터×헌터'의 등장인물에 대한 내용은 후라타 문서 참고하십시오.

웹 프레임워크 및 기술
{{{#!wiki style="margin:0 -10px" {{{#!folding [ 펼치기 / 접기 ] {{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"	^$ 유료 포함 • ~~취소선~~ 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드	<colbgcolor=#fcfcfd,#272935> CSS	Bootstrap • Tailwind CSS • Bulma • Foundation • Skeleton • Pico
	JSX	React • SolidJS • Astro • Preact • Gatsby • Remix • Inferno • Qwik
	JS	Angular • Svelte • Backbone.js • jQuery • Astro • htmx • Ember.js • Lit • 11ty • Marko • VanJS • Alpine.js
	Vue	Vue.js • VuePress • Gridsome • Quasar • Astro
	Python	Reflex
백엔드	Java	Spring • Struts • GWT • Grails • Jooby • Play! Framework^Scala
	Kotlin	Ktor
	JS	Express • NestJS • koa • Hono • fastify
	.NET	ASP.NET^$
	PHP	Laravel • Codeigniter • Reasonable • phalcon • Symfony • zend • CakePHP • FuelPHP • Yii • Slim • PHPixe
	Python	Django • Flask • FastAPI
	Ruby	Ruby on Rails • Sinatra
	Go	Gin • echo • Fiber
풀스택	JSX	Next.js • Astro • SolidStart • Remix • Qwik City
	JS	SvelteKit • Fresh • Astro • Marko
	Vue	Nuxt.js • Astro
	Java	Vaadin^$
	Python	Streamlit • Reflex
	Rust	Rocket • Actix • Leptos • Axum
하이브리드	.NET	Blazor
	Dart	Flutter
	Kotlin	Kotlin Multiplatform

}}}}}}}}} ||

<colcolor=#075B9D,#60C9F8> 플러터 Flutter

분류	애플리케이션 프레임워크
개발	구글 및 커뮤니티
안정화 최신 버전	3.24.4 - 2024년 10월 25일 #
\| \| \|

1. 개요2. 특징3. 상태 관리 라이브러리

3.1. GetX3.2. BLoC3.3. Provider3.4. Riverpod3.5. Hooks3.6. 기타

4. 백엔드5. 플러터 사용 예시6. 외부 링크7. 도서8. 웹 IDE

8.1. DartPad8.2. Project IDX

[clearfix]

1. 개요

구글에서 2017년 5월 출시되었으며 Skia/Impeller를 렌더링 엔진으로 사용하는 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. 하나의 코드 베이스로 Android, Linux, Windows, macOS, iOS 및 웹 브라우저에서 모두 동작되는 앱을 위해 출시되었다. 사용되는 언어는 역시 구글의 Dart를 사용한다.

웹에서 실행할 때 브라우저에서 빌드모드를 default와 WebAssembly로 제공하고 렌더러를 canvaskit과 skwasm를 제공한다. 플러터는 앱을 빌드할 때 빌드 모드를 선택하고 런타임에 사용할 수 있는 렌더러를 결정한다.

iOS, MacOS, Android에서 Impeller라는 렌더러를 사용한다.

Windows에서 Win32 앱으로 실행되며, 콘텐츠는 OpenGL API 호출을 DirectX 11에 해당하는 것으로 변환하는 라이브러리인 ANGLE을 사용하여 렌더링됩니다.

Linux에서는 Dart가 C 라이브러리를 호출할 수 있도록 하는 dart:ffi패키지로 실행한다.

데스크톱상에서의 플러터 앱 실행은 2021년 3월부터 공식적으로 지원되고 있다. 구글의 또 다른 운영체제인 퓨시아의 유저 인터페이스 및 퓨시아 애플리케이션 역시 플러터로 작성된다.

플러터 프레임워크는 소스 코드를 네이티브 CPU 머신 코드로 직접 컴파일하며 GUI를 위해 각 OS의 네이티브 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가 있으나 안드로이드 에뮬레이터 가속 기능, 디버깅, 에디터 기능등에서 구글의 공식 IDE인 안드로이드 스튜디오가 압도하고 있다. 참고로, 안드로이드 에뮬레이터 가속 사용시 리눅스 KVM과의 연동성이 좋기 때문에 성능을 위해서라면 Linux가 보다 적합하다.

3. 상태 관리 라이브러리

3.1. GetX

스테이트 매니지먼트, 클래스 디펜던시 매니지먼트, 라우팅, 유틸등 강력한 기능이 있다. 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에 비해 더 복잡하다.

3.5. Hooks

Provider, Riverpod 등을 관리하는 사람이 만든 라이브러리. State의 initState, didChangeDependencies, dispose를 useEffect 하나로 대체하고 있다. hooks는 주류 상태관리 라이브러리가 아니다. 동일한 제작자가 여러 상태관리를 중구난방식으로 만들어 내고 있는것에 주의하여야한다.

3.6. 기타

그밖의 상태관리 라이브러리 리스트는 플러터 공식문서의 옵션을 참고 하자.

4. 백엔드

구글이 운영하고 있는 Firebase 백엔드 서버의 서비스를 사용하는 대신 셀프 호스팅을 지원하는 백엔드 플랫폼인 AppWrite 또는 Supabase등의 사용도 가능하다. Dart 라이브러리를 사용하여 커스텀 백엔드 서버 앱 작성도 가능하며 dart_frog와 get_server등의 라이브러리를 이용하면 쉽다.

5. 플러터 사용 예시

Official showcase
It's all widgets, 2022년초 이후 다수의 웹 앱 예제가 제시되고 있다.

6. 외부 링크

유튜브 공식 Flutter 영상
Flutter 공식 문서
Flutter SDK 다운로드
Flutter Packages - 플러터 라이브러리 패키지
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
Reddit FlutterDev

7. 도서

도서관 자료 목록 - 플러터 링크

8. 웹 IDE

8.1. DartPad

DartPad는 Flutter SDK를 단말기에 설치하지 않아도 간단한 예제를 웹 브라우저에서 코딩하고 바로 실행시킬 수 있다.

Sample

8.2. Project IDX

Projec IDX는 Flutter SDK를 단말기에 설치하지 않아도 웹 브라우저에서 코딩하고 바로 실행시킬 수 있다.