Flutter(프레임워크)
덤프버전 :
분류
1. 개요[편집]
구글에서 2017년 5월 출시된 모바일/웹/데스크톱 크로스 플랫폼 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로 직접 컴파일도 지원하기 시작했다
데스크톱 상에서의 플러터 앱 실행은 2021년 3월부터 공식적으로 지원되고 있다. 구글의 차기 운영체제인 퓨시아의 유저 인터페이스 및 퓨시아 애플리케이션들이 플러터로 작성된다.
플러터 프레임워크는 소스 코드를 네이티브 CPU 머신 코드로 직접 컴파일 하며 UI를 렌더링 엔진 Skia로 직접 렌더링하기 때문에 성능이 뛰어나다. 소프트웨어 디자이너의 선택에 따라 iOS 앱에서 구글의 Material 테마 디자인과 Ripple 애니메이션을 사용하는 것이 가능하고 반대로 안드로이드에서 애플의 Cupertino 테마를 적용하는 것도 가능하다. 즉 플랫폼에 관계없이 플러터용 테마 디자인 라이브러리 적용 및 테마(Theme) 커스텀이 가능하다는 뜻이다. 각 OS의 네이티브 Widget/UI 컴포넌트로 변환하지 않고 플러터의 렌더링 엔진인 스키아로 직접 플랫폼 캔버스 상에 그리기 때문에 성능이 높고 어느 운영체제에서 소프트웨어 디자인이 가능하다.
2. 상세[편집]
Flutter는 기본적으로 리액티브 프레임워크 프로그래밍 기법으로 제작되었다. 선언형(declarative) UI와 상태관리(state management)가 특징이다. State 클래스에는 화면 표시와 관련된 build() 메서드외에 특정조건에서만 실행되는 라이프사이클 매서드가 있다.[1] UI 디자인을 Dart언어의 Widget을 사용하면 되므로 UI언어가 분리된 Java, C#, Javascript 계열의 개발과는 생산성 측면에서 비교 자체를 불허한다. 백엔드 지원에 있어서는 Appwrite나 Firebase등이 있으며 모바일 뿐아니라 웹 앱 분야에서도 강점을 가지고 있다. 구글에서 작정하고 밀어주는 프레임워크 중 하나이기에 인기가 점차 늘어나고 있다.
const와 final로 구분되는 상수가 특징인데, const는 컴파일 시에 적용되고 final은 런타임 시에 적용된다. 이렇게만 말해두면 이해가 쉽지만 실제 개발 환경에서는 오만가지 환경에 도배된 final을 마주하며 “내가 알던 그 개념이 아닌데?” 라는 반응이 나올 가능성이 높다. 그냥 고정된 디자인에는 const, 상태 관리에는 final을 사용한다 생각하면 된다.[2]
상태 관리 라이브러리는 기본 지원 Inherited 및 구글이 제창한 provider가 있는데 다른 라이브러리들 또한 provider의 구축 및 설계를 따라가고 있기에 provider는 기본적으로 배워두는 것이 좋다. 혹은 hooks를 배웠다면 기본 Inherited만을 사용해서 앱을 만드는 것도 가능하다. 물론 1인 개발과 같은 작은 개발에서의 이야기이며, 규모가 있는 프로젝트에 투입될 경우 상태 관리 라이브러리는 물론 네이밍과 라우팅 규칙까지 정해진 디자인 패턴을 사용하는 경우가 많으니 유의해야 한다.
주요 IDE로는 안드로이드 스튜디오 그리고 Visual Studio Code가 쓰이는데, 기능 면에서는 안드로이드 스튜디오가 압도하기에 Mac 환경에서도 안드로이드 스튜디오를 굴리는 경우가 많다. 플러터 학습에는 안드로이드 스튜디오 및 Material Design 테마가 쓰이는 경우가 많으며, Cupertino 테마는 학습량이 증가하기 때문에 Material 테마를 커스텀화 하여 사용하면된다.
2.1. 디자인 예시[편집]
Official showcase
It's all widgets[3]
3. 상태 관리 라이브러리[편집]
3.1. GetX[편집]
상당히 다양한 기능을 가져 상태 관리 라이브러리로 치기에는 너무 커서 사용 시 문제가 될 수 있다는 의견과 편리해서 좋다는 의견이 매우 심하게 대립하는 라이브러리.
GetX가 호불호가 극명한데는 여러 이유가 있지만 기술적인 부분에서만 본다면 자유도가 다른 상태관리라이브러리 대비 엄청 높다는 점에서 기인한다.
타 라이브러리는 사용 방법을 어느정도 강제하는 문법이기 때문에, 최악으로 빠지는 일을 가급적 문법차원에서 막도록 만든다면 GetX는 사용자가 원하는 모든 구조와 케이스를 허용하다보니, 고수가 잡아서 클릭아케텍쳐와 미리 정한 원칙에 철저히 따르며 전체를 보는눈을 가지고 만든다면 타 라이브러리보다 훨씬 유용한 도구가 되지만(그 개발자에게 맞춤이 가능함) 초보가 잡는다면 대혼돈의 멀티버스가 열리고 몇일 안가서 건들수없는 스파게티가 되곤한다.
문제는 GetX는 입문자에게 권유되는 상태관리라는점(쉽기 때문) 과 자유도가 높다는점 이 합쳐져 안좋은 케이스들이 많아지고 그런점이 평판에 영향을 주고 있다고 볼수있다.
3.2. BLoC[편집]
BLoC의 핵심 개념은 Flutter가 Vue처럼 상호간에 잘 연결된 UI 영역과 로직 영역의 직접 연결을 끊고 그 사이를 BLoC이 들어가 이벤트 기반으로 바꿔버리는 것이다.
산하 라이브러리로 Cubit이 있다.
3.3. Provider[편집]
3.4. Riverpod[편집]
Provider의 제작자가 만든 Provider의 근본적인 문제점을 개선한 상태 관리 라이브러리.
3.5. Hooks[편집]
Provider, Riverpod 등을 관리하는 사람이 만든 라이브러리. init과 dispose 등의 상태 관리 개선, Stateful과 Stateless의 통합 등이 특징이다.
4. 외부 링크[편집]
유튜브 공식 Flutter 영상
Flutter 공식 문서
Flutter SDK 다운로드
Flutter Packages - 플러터 라이브러리 패키지
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
Reddit FlutterDev
5. 도서[편집]
링크
국가자료종합목록 - 플러터
6. DartPad[편집]
Flutter SDK 를 설치하지 않아도 간단한 예제는 Web에서 코딩하고 바로 실행시킬 수 있다.
DartPad
Sample
7. 백엔드[편집]
플러터는 기본적으로 프론트엔드 프레임워크지만, 라이브러리를 사용해 백엔드 개발도 가능하다.[4] 플러터 개발에 익숙한 1인 개발자가 빠르게 프로토타입 백엔드를 개발 할 경우에 추천한다. 대표적으로 dart_frog와 get_server 라이브러리가 있다.
Flutter 3.0부터는 Firebase에서도 공식으로 지원하기에 관심이 있으면 공부해보는 것도 나쁘지 않다.
이 문서의 내용 중 전체 또는 일부는 2023-10-25 19:17:25에 나무위키 Flutter(프레임워크) 문서에서 가져왔습니다.