Flutter란? Flutter의 특징

Flutter란?

 

Mobile World Congress 2018에서 Flutter의 최초 베타 릴리스를 발표하였고 Google에서 새롭게 선보이는 모바일 UI 프레임워크이며, 개발자가 iOS와 Android 모두를 위한 고품질 기본 인터페이스를 제작하는 데 도움을 주는 크로스 플랫폼 프레임워크 입니다.

Flutter의 특징

 

• 풍부하고 유연한 디자인 - 작성 가능한 위젯 세트, 풍부한 애니메이션 라이브러리 및 확장 가능한 계층형 아키텍처 제공

• 고품질 환경 - 이식성 있는 GPU 가속 렌더러 및 고성능의 네이티브 ARM 코드 런타임, 플랫폼 상호 운용성 기능을 통해 기기 및 플랫폼 전반에 걸쳐 고품질 환경 지원

• 신속한 개발 - 상태를 기록하는 핫리로드(Stateful Hot Reload), 새로운 반응형 프레임워크, 다양한 위젯 세트 및 통합 도구와 같은 기능 제공

 

위젯

 

Flutter는 OEM 위젯들 (또는 DOM 웹뷰)을 사용하지 않고, 자체적인 위젯을 사용하기 때문에 좋은 룩앤필, 빠른 속도, 커스터마이즈, 확장가능성을 지원하는 위젯을 제공한다.

레이아웃

 

No Html, No CSS

 

 

 

• 레이아웃 : Row, Column, uDrawer

• 텍스트 : FadeInPhotoScaffold, Stack

• 구조 : Button, Toast, Men, transformations

• 스타일링 : Center, Padding

Flutter에는 (Padding과 Center와 같은) 내장된 아주 많은 위젯들이 있기 때문에 쓸때 없이 시간을 낭비할 필요가 없다.

커스텀 디자인

 

Flutter는 풍부하고, 커스터마이즈 가능한 Android, iOS 그리고 Material, Cupertino 디자인을 가지고 있습니다.

Flutter는 커스터마이즈 능력을 활용해서 멀티 플랫폼에 있는 네이티브 위젯들과 매칭되는 위젯들을 지원하고 있습니다.

 

성능

 

React Native

JavaScript 영역의 코드가 네이티브 영역에 있는 OEM 위젯에 접속을 하기위해서 결국 브릿지를 거치게 됩니다.

리액티브 뷰에서는 OEM 위젯에 굉장히 자주 접근하게 되고 (사용자가 화면에서 스와이프 한번을 했을때 최대 초당 60번까지도 접근), 이는 결국 퍼포먼스 이슈를 야기하게 됩니다.

Flutter

 

프로그램 (초록색) 영역과 네이티브 플랫폼 코드 (파란색) 사이에는 인코딩과 디코딩을 담당하는 인터페이스가 여전히 존재하고 있습니다. 그러나, JavaScript 브릿지와 비교했을때, 비교할 수 없을 정도로 빠른 성능을 가지고 있습니다.

 

Flutter는 Dart라는 컴파일 프로그래밍 언어를 이용해 이 브릿지로 인해 발생하는 성능 문제를 피하고 있습니다. Dart는 Ahead of time (AOT)에 여러 플랫폼에 상응하는 네이티브 코드로 컴파일 됩니다.

Flutter는 문맥 교환을 하는 JavaScript 브릿지를 거치지 않고 플랫폼과 직접적으로 커뮤니케이션하는 것입니다.

Hot reload

 

Flutter에서 가장 유명한 특징은 빠르고, stateful한 Hot reload 기능입니다. 앱이 동작하고 있는 동안 Flutter 앱에 변경을 줄 수 있습니다.

 

Flutter로 만든 다양한 앱

 

참고자료:

https://medium.com/@dan_kim/%EB%B2%88%EC%97%AD-flutter%EB%8A%94-%EC%99%9C-%ED%98%81%EB%AA%85%EC%A0%81%EC%9D%B8%EA%B0%80-967c1dfcc5a9,

https://brunch.co.kr/@myner/3,

https://blog.naver.com/PostView.nhn?blogId=yo2dh&logNo=221416630843&categoryNo=0&parentCategoryNo=0&viewDate=¤tPage=1&postListTopCurrentPage=1&from=postView,

https://jaceshim.github.io/2019/01/22/flutter-study-about-flutter/index.html

https://software-creator.tistory.com/10