Flutter와 Dart

Dart

구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어

C언어의 문법과 거의 같으며 Java, C#, Javascript와 같은 기능적 스트럭처를 추가한 언어

• 웹, 서버, 모바일 앱 개발이 가능한 확장성 있는 오픈 소스 프로그래밍 언어 제공
• AOT를 통해 네이티브로 컴파일되는 C 방식의 구문을 사용하는 객체 지향 단일 상속 언어를 제공
• 자바스크립트로 변환(transcompile) 가능
• 인터페이스와 추상 클래스 지원

JS vs Dart

진입점

JS에는 진입점 역할을 하는 함수가 미리 정의되어 있지 않다. 직접 지정해서 사용한다.

Dart에서는 최상단에 앱의 진입점인 main() 함수가 반드시 있어야 한다.

 

콘솔 출력

// Javascript
console.log('Hello World!');

// Dart
print('Hello world!')

변수

JS에서는 변수의 타입을 선언할 수 없다.

Dart에서는 명시적으로 변수의 타입을 선언하거나 타입 추론이 가능해야 한다.

 

wip

참고: https://flutter-ko.dev/docs/get-started/flutter-for/react-native-devs

React Native 개발자를 위한 Flutter

 

Flutter

위젯이라는 작은 컴포넌트를 조합해 모바일 UI를 만든다.

플러터의 모든 것은 위젯이며 위젯은 뷰를 묘사하는 다트 클래스다. 구조, 스타일, 애니메이션 그리고 그 밖에 UI를 구성하는 모든 것이 위젯이다.

 

Flutter rendering

1. 애니메이트 - 애니메이션 티커(Animation ticker)가 동작하며 그리기 작업을 시작한다.

2. 빌드 - 플러터가 위젯 트리를 빌드한다.

3. 레이아웃 - 플러터가 트리를 내려갔다가 거슬러 올라오면서 대상 위젯의 레이아웃을 결정한다.

4. 조립 - 각 픽셀을 준비한다.

5. 그리기 - 플러터가 위젯을 그린다.