[Flutter] Flutter란?

참고

• https://velog.io/@jojo_devstory/Flutter%EB%9E%80-Flutter%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
• https://www.youtube.com/watch?v=siow15Yn8r8&list=RDCMUCUpJs89fSBXNolQGOYKn0YQ&start_radio=1&rv=siow15Yn8r8&t=62

1. Flutter란?

• Google에서 개발하고 Mobile World Congress 2018에서 최초 베타 릴리스를 발표하면서 새롭게 소개된 크로스 플랫폼 모바일 앱 개발 프레임워크.

• iOS와 Android 두 OS에 대해 고품질 기본 인터페이스를 제작하는 데 도움을 주는 크로스 플래폼 프레임워크

• 자체적으로 UI를 렌더링하기 때문에 iOS에서 material 디자인과 ripple 애니메이션을 볼 수 있고, Android에서 cupertino 디자인을 볼 수 있다.

• 화면 전체를 2D 그래픽 API로 fillRect 하고, drawText drawImage 해서 앱을 만드는 것처럼 Flutter 엔진이 Skia 기반으로 렌더링 해준다. 웹 개발에서 HTML을 모두 무시하고 전체를 flash나 canvas로 만드는 것과 같다.

2. 왜 CrossPlatform을 사용하는가?

• 크로스 플랫폼을 사용하면 개발 자원을 줄일 수 있다. (모바일 개발에서 iOS, Android 모바일 개발자가 각각 필요하지 않다. 개발 자원을 줄일 수 있는 것과 유지 보수가 더 괜찮다는 것이 장점)
• 하지만 이미 시장에서 모바일 크로스플랫폼 개발이라고 하면 떠오르는 프레임워크로 Facebook에서 개발을 주도하는 React-Native가 있어서 많은 개발자들이 React-Native와 Flutter를 두고 고민을 하는 상황.

3. Flutter VS React-Native vs Ionic

1. 사용 프레임 워크
   a. Flutter: Dart + Flutter
   b. React-Native: JS + ReactJS
   c. Ionic: JavaScript(아무 프레임워크 또는 프레임 워크 없이)

2. 어떤 결과를 얻을 수 있나?
   a. Flutter: Compiled Native Apps
   b. React-Native: Partly compiled (UI Comnponents) Native Apps
   c. Ionic: WebView-hosted Web Apps(Nothing is Compiled)

3. a. Flutter: Does NOT compile to iOS / Android UI Components
   b. React-Native: Does compile to iOS / Android UI Components
   c. Ionic: Does NOT compile to iOS / Android UI Components

4. 만들 수 있는 것
   a. Flutter: Cross-platform (mobile apps, web apps, desktop apps)
   b. React-Native: Mostly mobile apps (+ React Native Web)
   c. Ionic: Cross-platform (mobile apps, web apps, desktop apps)

5. a. Flutter: Developed by Google
   b. React-Native: Developed by Facebook
   c. Ionic: Developed by Ionic

6. 특징
   a. Flutter: 모든 픽셀 제어 => 유연성, 높은 성능
   b. React-Native:
   c. Ionic:

// flutter 체크
flutter docter

// flutter 새 프로젝트
flutter create 만들폴더이름
flutter create first_app // 소문자, - 사용하기, 카멜케이스 NOOOOO!!!, - NO!!!

// flutter 실행
flutter run // 프로젝트가 있는 폴더 안에서

// reload
r

// full reload and full rebuild
shift + r

Flutter 기본 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(home: Text('Hello!'));
  }
}