[[파일:_flutter.png|width=250]] [목차] == 개요 == [[https://flutter.dev|공식 홈페이지]] [[구글]]에서 2017년 5월 크로스 플랫폼 모바일/웹/데스크톱 GUI 애플리케이션 소프트웨어 디자인 [[프레임워크]]로서 출시되었다. 사용되는 언어는 역시 구글에 의해 제창된 [[Dart(프로그래밍 언어)|Dart]]를 사용한다. 컴파일된 프로그램은 [[안드로이드(운영체제)|안드로이드]]와 [[iOS]]상에서 실행을 지원하며, 웹 브라우저에서 플러터 앱 실행을 위한 transpilation, 리눅스/윈도우즈/맥 데스크톱 상에서 플러터 앱 실행 지원도 공식 발표되었으며 구글 안드로이드 OS의 차기 운영체제인 [[퓨시아]]의 유저 인터페이스 및 퓨시아 애플리케이션들이 플러터로 작성된다. 네이티브 CPU 머신코드로 직접 컴파일링 및 UI를 자체 렌더엔진으로 직접 렌더링하기 때문에 성능이 뛰어나며 크로스플랫폼 솔루션으로 iOS에서 구글의 Material 테마 디자인과 Ripple 애니메이션을 볼 수 있고 Android에서 애플의 Cupertino[* 구글 입장에서 같은 [[실리콘밸리]]에 입주한 애플을 지칭할 때 사용한다. 우리나라로 치면 분당style 이나 판교style 쯤 된다.] 테마 패키지를 사용가능하다. 마치 화면 전체를 그래픽 API로 fillRect 하고 drawText drawImage 해서 앱을 만드는 것처럼 Flutter는 Skia 엔진을 사용하여 렌더링해준다. 각 OS 플랫폼의 네이티브 widget/ui 구성요소로 변환하지 않고 플러터의 그래픽 렌더 엔진인 스키아로 직접 플랫폼 Canvas상에 드로잉되기 때문에 성능이 높고 플랫폼에 관계없이 픽셀 퍼팩트한 디자인을 구현가능하다. == 상세 == 크로스플랫폼 환경에서 네이티브 이상의 성능[* 안드로이드, iOS를 기본지원한다. 컴파일 to 웹으로 브라우저 실행도 지원]과 미려한 UI와 확장 기능을 제공하는 프레임워크이다. [[https://play.google.com/store/apps/details?id=io.flutter.demo.gallery|Flutter Gallery 샘플 앱]]을 설치하여 성능을 확인할 수 있다. 아이폰에서는 [[https://github.com/flutter/flutter/tree/master/examples/flutter_gallery|소스 코드]]를 다운받아 [[Xcode]]에서 실행하면 잘 작동한다.[* 메인 메뉴 > Material > Text fields 들어가서 Name과 Phone 을 왔다갔다 하며 애니메이션이 부드러운지 확인한다. debug 모드에서는 버벅일 수 있으며 flutter build apk나 flutter build ios로 apk ipa 를 만들어서 설치하면 잘 돌아간다.] [[안드로이드 스튜디오]]나 [[IntelliJ IDEA]], [[비주얼 스튜디오 코드]][* [[비주얼 스튜디오]]에서 쓰이는 [[https://namu.wiki/w/%ED%8C%8C%EC%9D%BC:flutter_dev_env1.png|ctrl + .]]은 매우 유용하다. 명령 팔레트에서 [[https://namu.wiki/w/%ED%8C%8C%EC%9D%BC:flutter_dev_env2.png|Flutter: Toggle Debug Painting]]을 켜놓고 UI 작업을 할 수 있다.] 등을 이용하여 소프트웨어 디자인을 할 수 있다.[* [[크롬 OS]]에서 개발할 경우 따로 Android 에뮬을 띄울 필요가 없다.[[https://proandroiddev.com/flutter-development-on-a-pixelbook-dde984a3fc1e|#]]] Hot Reload 기능을 사용하면 디버깅을 중지하지 않고 소스 수정 후 저장만 하면 에뮬레이터나 기기에 바로 반영되어 UI와 로직이 모두 업데이트된다. 프레임워크의 구조 설계 자체가 이 기능을 위해 특화되어있다. Hot Restart까지 사용하면 프로젝트를 닫기 전까지 디버깅을 중지할 필요가 없다. Flutter UI로 작성한 코드를 Web 에서 실행할 수 있는 [[https://techcrunch.com/2018/12/04/googles-flutter-toolkit-goes-beyond-mobile-with-project-hummingbird/|Hummingbird]]가 발표되었다. 개발자들의 호응을 알 수 있는 [[GitHub]] 스타 순위는 2020년 4월 기준 7위까지 올라왔다. === 디자인 예시 === [[https://flutter.dev/showcase|Showcase]] [[https://itsallwidgets.com|An open list of apps built with Flutter]][* Flutter를 이용해 디자인한 앱들이 올라오고, 오픈소스인 경우 소스를 볼 수 있다.] == [[Xamarin]]과의 비교 == [[https://flutter-kr.io/docs/get-started/flutter-for/xamarin-forms-devs|Flutter for Xamarin.Forms Developers]] Xamarin은 UI 언어인 XAML과 프로그래밍 언어인 C#이 분리되어 있고, C#만으로 UI를 작성하려면 Imperative 스타일의 UI가 된다. Xamarin.Forms에서 C#만으로 UI디자인과 프로그래밍을 하나로 작성하려면 Imperative 스타일의 지저분한 코드가 되지만 플러터는 보다 진보된 Declaritive UI[* https://flutter.dev/docs/get-started/flutter-for/declarative] 방식으로 GUI 디자인과 로직 디자인을 Dart 언어 하나로 통합하고 있다. Xamarin에서는 복잡하게 구현해야 했던 UI와 애니메이션들도 Flutter 프래임워크에서는 아주 간단히 작성된다. 플러터 경우 GUI에 있어 각 플랫폼의 네이티브 UI로 변환하지 않고 Skia 렌더엔진으로 직접 처리되며, 프로그램 실행시 네이티브 UI로 컨버팅 프로세스가 있는 Xamarin보다 높은 성능을 보여준다. 예를 들어 Xamarin.Forms에서 ListView 를 쓰면 Android/iOS 각각의 ListView가 호출되어 미묘하게 화면표시가 달리 동작하는 부분이 있고 각각의 Custom Renderer가 필요했는데, Flutter에서는 플랫폼이 달라도 완전히 동일한 UX를 제공한다. Xamarin은 각 플랫폼의 네이티브 UI로 변환하여 실행되고 복잡한 UI를 위해서는 각각의 커스텀 렌더러가 필요하여 생산성이 떨어지고 네이티브 앱 개발환경에 비해 컴파일도 오래 걸린다. Flutter가 모바일 뿐아니라 데스크톱까지 지원을 발표하고 Xamarin은 웹 환경까지 지원하지 못하고 있다. 플러터는 기존 컴퓨터 언어의 단점들을 개선한 최신판인 [[Dart(프로그래밍 언어)|Dart]][* C언어와 문법이 거의같다고 보면되며, 거기에 C#, Java, JS, Python의 장점만 추가시킨 최신 컴퓨터 프로그래밍 언어이다.]를 쓰고 있는것 또한 장점이다. 안드로이드의 주인인 구글이 재창한 다트가 모바일 및 크로스 플랫폼 소프트웨어 디자인에 보다 적합하다. 또한 안드로이드 차기 OS에서 역시 플러터가 메인이 되므로 더욱그렇다. 플러터는 모바일뿐아니라 웹 및 리눅스를 포함하는 데스크톱 환경까지 지원한다고 공식 발표하였고, 웹도 기존부터 지원해 왔으므로 사실상 플랫폼 지원 폭에서 자마린을 능가한다. 자마린은 유료 윈도우즈 PC 환경 및 유료 비주얼 스튜디오에 국한된 MS 프로그램에 종속되어 있다. 플러터는 모바일 환경의 1위인 구글이 주도하며 완전 무료이고 데스크톱까지 지원을 공식 발표한 이상 플러터의 전망은 밝다. == [[React(라이브러리)#s-6|React Native]]와의 비교 == [[https://flutter-kr.io/docs/get-started/flutter-for/react-native-devs|Flutter for React Native Developers]] React Native는 OEM에 의존적인 UI 위젯을 사용하고 있으며, 네이티브 코드를 실행할 때 bridge로 인한 성능 저하가 있고 학습 곡선이 가파르다는 단점[* 후반의 기울기가 가파르다는 뜻이다. 배우면 배울수록 알아야 하는 것들이 폭발적으로 늘어난다는 뜻. 초반의 기울기가 가파르면 학습이 쉽다는 뜻이다.]이 있다. == 외부 링크 == [[https://flutter-kr.io/docs|Flutter 공식문서(한글)]] - 한글화 진행중 [[https://flutter.dev/docs/|Flutter 공식문서(영문)]] [[https://twitter.com/flutterio|공식 트위터]] - '금주의 위젯' 등 유용한 소식이 업데이트된다. [[https://youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw|유튜브 Flutter Dev]] - Flutter 관련 공식 영상이 올라온다. [[https://docs.flutter.io|Flutter SDK]] [[https://pub.dartlang.org/flutter|Flutter Packages]] - UI 쪽은 Dart로 작성되어 쉽게 수정이 가능하며, 네이티브 쪽은 기존 안드로이드/iOS의 주요 패키지들이 짝을 이뤄 wrapping 되어 있다. [[https://www.reddit.com/r/FlutterDev|Reddit FlutterDev]] [[https://github.com/Solido/awesome-flutter|awesome-flutter]] 국내 커뮤니티 [[https://cafe.naver.com/googleflutter|네이버 카페]], [[https://www.facebook.com/groups/flutterkorea|페이스북 공개그룹]] == 도서 == [[https://www.nl.go.kr/kolisnet/search/searchResultAllList.do?tab=ALL&historyYn=Y&keywordType1=total&keyword1=%ED%94%8C%EB%9F%AC%ED%84%B0&bookFilter=BKGM&bookFilter=YON&bookFilter=BKDM&bookFilter=NK&bookFilter=NP&bookFilter=OT|링크]] 국가자료종합목록 - 플러터 == Dart Pad == Flutter SDK 를 설치하지 않아도 간단한 예제는 Web에서 코딩하고 바로 실행시킬 수 있다. [[https://dartpad.dev/|Dart Pad]] [[파일:스크린샷 2020-08-14 오후 3.20.39.png|width=500]] [[https://dartpad.dev/5eaa69dfeba45bdc3d05b715d16ddc5f|Sample]] == 관련 문서 == * [[Kotlin]] * [[Dart(프로그래밍 언어)|Dart]] * [[Swift(프로그래밍 언어)|Swift]] [[분류:소프트웨어]]