Flutter 특징과 개발환경 설정 방법

Flutter란

Flutter는 하나의 소스 코드로 Android, I-OS, Web, Chrome OS, Windows, Linux 등의 여러 플랫폼에서 동작 가능한 응용 프로그램을 개발할 수 있는 Cross Platform SDK입니다. Google이 2017년 발표하였으며, 최근까지도 Google 주도하에 활발하게 개발되고 있고, 3rd party lib도 다양하게 개발되고 있습니다.

Flutter에서 사용하는 프래그램 언어는 Dart입니다. Dart는 Java Script 문법적으로 비슷하고, C/C++, C#, Python 등의 장점을 수용하였습니다. 기존에 프로그램 언어를 하나라도 알고 있다면 쉽게 사용이 가능합니다. Dart는 Web에서는 Html, CSS, Java script으로 Transcompile 되고, Android와 I-OS에서는 Native code로 transcompile 됩니다.

Gogole Next OS인 퓨시아(Fuchsia)에서 Application의 공식 개발 언어로 Flutter를 사용하고 있다고 합니다. 당분간에는 Google에 의해서 Flutter 성능 향상이 지속될 것으로 예상됩니다.

Flutter achitecture Overivew는아래 그림과 같습니다. (출처: https://docs.flutter.dev/resources/architectural-overview) Framework 최상단에서는 Google에서 만든 Material UI Widgetr과 I-OS의 Cupertino Widget을 모두 사용할 수 있습니다. 즉, Android에서도 I-OS 스타일의 GUI Widget을 개발하고 있고, I-OS 에서도 Android 스타일의 GUI Widget을 모두 사용할 수 있습니다.

GUI Widget 아랫단은 Skia 기반의 Rendering 엔진을 사용하고 있습니다. C/C++ Native code를 사용함에 따라서 Java Script 또는 React Native보다 성능적으로 우위를 가질 수 있습니다. Target Plafform이 Web인 경우에는 Rendering Engine은 html renderer와 canvaskit Renderer를 사용할 수 있습니다. Dart코드는 Html, CSS, Web GL을 변환하여 최종적으로 Rendering 합니다.

Flutter SW Architecture (출처: https://docs.flutter.dev/resources/architectural-overview)

Flutter와 React Native 비교

최근 많이 사용하고 있는 Cross Plaftorm SDK는 Flutter와 React Native 입니다. 각각의 장단점은 다음과 같습니다.

	React Native	Flutter
개발 주체	Facebook (Meta)	Google
프래그램 언어	Java Script, JSX, Type Script	Dart
Performance	불리 (Java Script Bridge 필요)	유리 (Native code로 compile)
Eco system	Face book에서 Core compoent개발 Open Source community에서 필요하 lib개발	Google 주도로 Plug in 개발, Pub 관리
Hot Reloading	지원	지원
Debuggin Tools	Visual Code 에서 extention 설치, Emulator 사용	Android Studio, Visual Code 에서 Emulator 사용
App 크기	작음	크다 (Render 포함, 2MB)

React Native와 Flutter비교 (출처: https://www.youtube.com/watch?v=X8ipUgXH6jw)

Flutter 개발환경

Flutter 개발 환경은 Flutter SDK, Android Studio & SDK, Apple X-Code, Visual Code 설치가 필요합니다. Flutter SDK와 Android SDK, X-Code는 반드시 설치해야 하고, IDE를 Android Studio로 사용한다면 Visual Code를 꼭 설치할 필요는 없습니다. 각각의 OS 별 설치는 Flutter Install 페이지에서 확인할 수 있습니다.

Flutter SDK 설치 (설명: https://docs.flutter.dev/get-started/install )

방법 1. Flutter SDK 다운로드 후 PATH 설정:

Flutter SDK : https://docs.flutter.dev/development/tools/sdk/releases
Path 설정: .zprofilerc 또는 .zbash 파일에 아래 내용 추가

export PATH="$PATH: [flutter 설치 위치]/flutter/bin"

방법 2. Home Brew로 설치

MacOS 에서 Home Brew로 설치 시 Path는 자동으로 설정되고, SDK는 /usr/local/Caskroom/flutter/2.8.0/flutter 에 설치됩니다.

$ brew install flutter

Flutter 설치 확인 - flutter doctor 실행

Flutter SDK 실행 후 flutter doctor로 Android SDK와 X-Code 설치 내용을 확인합니다. 정상 설치된 경우는 아래 그림과 같고, 에러 메시지 따라서 관련 Tool을 설치해야 합니다. 만일 해당 Tool 설치가 안된 경우 설치 URL도 같이 표시됩니다.

$ flutter doctor -v

Android Studio 설치

Android Studio를 아래 링크에서 설치합니다.

Android Studio 설치: https://developer.android.com/studio (참고: https://kibua20.tistory.com/37)
Android SDK 설치: Android Studio에서 SDK Manager로 설치
Android Emulator 설치: Android Studio에서 Emulator로 설치
Flutter Plugin 설치: Android Studio 실행 상태에서 Shift 2번 누르고 Plugins 메뉴에서 Flutter를 설치합니다.

X-code 설치

X-code는 I-OS App을 빌드하기 위해서 필요한 Tool chain입니다. X-Code를 사용하기 위해서는 MacOS를 사용해야 합니다.

X-Code download 및 설치 ( web download or Mac App Store). ※ AppStore는 다운로드 속도가 느리니, Web에서 직접 다운로드하는 것을 추천듭니다.
X-code 설치 후 아래 명령어 실행하여 설정을 업데이트합니다.
CocoaPods 설치 (Mac용 Swift 및 Object C 프로젝트 종속성 라이브러리)

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -license

$ sudo gem install cocoapods

Visual Code에서 Flutter extension 설치

Visual Code를 설치하고 Flutter를 사용하기 위해서는 Flutter extention을 설치해야 합니다. Fluttter Extention 설치 시 Dark Extension도 같이 설치됩니다. Android Studio와 Visual Code 중에서 선호하는 IDE를 사용하면 됩니다. Flutter 프로젝트의 코드를 주로 추가하는 경우에는 Android Studio와 Visual Code 둘다 사용해도 무방하고, Android apk관련된 Tool을 사용해야 하는 경우라면 Android Studio를 사용을 추천드립니다.

Flutter App 생성 및 실행

Android Studio에서 Flutter Application을 생성하는 것도 가능하고, 터미널 명령어를 사용해서 프로젝트 생성도 가능합니다. Android Studio에서는 Android Emulator와 I-OS Simulator를 수동으로 실행해야 하고, Visual Code에서는 자동으로 실행해줘야 합니다.