Flutter :: 플러터/앱개발/스키아엔진/개요/성능/HotReload/인기/디자인예시/Dart문법

Flutter :: 플러터/앱개발/스키아엔진/개요/성능/HotReload/인기/디자인예시/Dart문법

 

1. 개요

구글에서 2017년 5월 크로스 플랫폼 모바일/웹/데스크톱 GUI 애플리케이션 소프트웨어 디자인 프레임워크로서 출시되었다. 언어도 구글에 의해 만들어진 Dart를 사용한다. 컴파일된 프로그램은 안드로이드와 iOS상에서 실행을 지원하며, 웹 브라우저에서 플러터 앱 실행을 위한 transpilation, 리눅스/윈도우즈/맥 데스크톱 상에서 플러터 앱 실행 지원도 공식 발표되었으며 구글 안드로이드 OS의 차기 운영체제인 퓨시아의 유저 인터페이스 및 퓨시아 애플리케이션들이 플러터로 작성된다.

네이티브 코드로 직접 변환 및 UI를 자체 렌더엔진(Skia Engine)으로 직접 렌더링하기 때문에 성능이 뛰어나며 크로스플랫폼 솔루션으로 iOS에서 구글의 Material 테마 디자인과 Ripple 애니메이션을 볼 수 있고 Android에서 애플의 Cupertino 테마 패키지를 사용가능하다. 마치 화면 전체를 그래픽 API로 fillRect 하고 drawText drawImage 해서 앱을 만드는 것처럼 Flutter는 Skia 엔진을 사용하여 렌더링해준다. 각 OS 플랫폼의 네이티브 widget/ui 구성요소로 변환하지 않고 플러터의 그래픽 렌더 엔진인 스키아로 직접 플랫폼 Canvas상에 드로잉되기 때문에 성능이 높고 플랫폼에 관계없이 픽셀 퍼팩트한 디자인을 구현가능하다.

 

2. 성능

크로스플랫폼 환경에서 네이티브 이상의 성능과 미려한 UI와 확장 기능을 제공하는 프레임워크이다. Flutter Gallery 샘플 앱을 설치하여 성능을 확인할 수 있다. 아이폰에서는 소스 코드를 다운받아 Xcode에서 실행하면 잘 작동한다. 안드로이드 스튜디오나 IntelliJ IDEA, 비주얼 스튜디오 코드 등을 이용하여 소프트웨어 디자인을 할 수 있다.

 

3. Hot Reload 기능

Hot Reload 기능을 사용하면 디버깅을 중지하지 않고 소스 수정 후 저장만 하면 에뮬레이터나 기기에 바로 반영되어 UI와 로직이 모두 업데이트된다. 프레임워크의 구조 설계 자체가 이 기능을 위해 특화되어있다. Hot Restart까지 사용하면 프로젝트를 닫기 전까지 디버깅을 중지할 필요가 없다.

 

4. 인기

Flutter UI로 작성한 코드를 Web 에서 실행할 수 있는 Hummingbird가 발표되었다. 개발자들의 호응을 알 수 있는 GitHub 스타 순위는 2020년 4월 기준 7위까지 올라왔다.

5. 디자인 예시

 

 

 

 

6. Dart문법

문장끝

세미콜론을 붙인다.

 

자료형

int / double / String / bool / num

 

* num : int와 double 포함

 

타입추론

var

 

상수

final : 문자열 상수 / final String str = "hello";

const : 상수 / const int count = 0;

 

연산자

+

-

*

% : 나머지

/ : 나누기

~/ : 몫

 

증감 연산자

++i / --i / i++ / i--

 

비교 연산자

== / != / < / > / <= / >=

 

논리 연산자

&& / || / ! / == / !=

 

주석

// statement : 한줄 주석

/* statement */ : 여러줄 주석

 

데이터 타입 검사

is / is! : 같은 타입인지 검사 ( true, false 반환 )

ex)

int a = 10;
print(a is int) // true

 

ex)

var a = 10; // 타입추론(int)
print(a is int) // true

타입 변환

class Parent {

    String name;

}

class Child extends Parent {

    String school;

}

void main() {

    // EX 1

    Parent parent = Parent();

    parent.name = "강호동";

    

    Child child = parent as Child // 다운캐스팅



    // EX 2

    Child child = Child();

    child.name = "강호동";

    

    Parent parent = child as Parent // 업캐스팅, 불필요한 행위, 이미 부모의 속성을 가지고 있기 때문에



}