EP3. Flutter 프로젝트 생성
1. 개발환경
•
Flutter 
flutterdevmacOS install
flutterdevmacOS install•
XCode (iOS 한정) 
Mac App StoreXcode
•
Cocoapods (iOS 한정) 
CocoaPodsCocoaPods.org
CocoaPodsCocoaPods.org
•
Android Studio + Flutter Plugin
개발환경 설정은 각 공식 홈페이지 가이드에 따라 진행해주세요.
테스트 기기의 경우 iOS시뮬레이터, Android에뮬레이터롤 사용해도 되나 가급적 실제 디바이스를 사용하는 것을 권장합니다. (실제 디바이스에서만 동작하는 로직들이 있음. ex. Push Notification)
2. 프로젝트 생성
1.
Android Studio > File > New > New Flutter Project…
Android Studio에 Flutter Plugin이 설치되어 있어야 ‘New Flutter Project…’ 메뉴가 표시됩니다.
Flutter Project 생성. Flutter 설치 및 환경변수 설정이 제대로 되었다면 위 이미지처럼 Flutter SDK Path가 표시됩니다.
2.
프로젝트 설정
신규 생성할 Flutter Project 정보를 입력합니다.
중요한 부분은 Project type을 ‘Package’로 설정해야 합니다. 우리는 재사용 가능한 Flutter Package를 만들고 앞으로 신규 서비스를 만들때 이 Package를 활용해 더 빠르게 앱을 개발할 수 있습니다.
3. Package 샘플앱 생성
2번 과정에서 만든 Package는 단독으로 실행이 불가능합니다.
Package를 개발하면서 테스트 할 샘플앱을 생성해야 합니다.
1.
package 워크스페이스 내에 ‘sample’ 디렉토리를 추가합니다.
2.
Android Studio > File > New > New Flutter Project…
sample 디렉토리에 Flutter Application을 추가합니다.
Package 프로젝트 내에 sample application 프로젝트가 추가된 형태가 됩니다.
4. .gitignore 설정
불필요한 파일의 업로드를 막기 위해 .gitignore 파일을 생성하고 내용을 추가해 줍니다.
5. configuration 설정
샘플앱을 실행시킬 수 있도록 configuration을 설정합니다.
1.
Add Configuration > Edit Configurations…
2.
Add New Configuration > Flutter
3.
Configuration 생성
•
샘플앱의 main.dart가 있는 위치를 설정합니다.
6. 샘플앱 실행
샘플앱을 실행할 Target 디바이스를 선택 후 configuration을 실행하여 Flutter 샘플앱이 실행되는지 확인합니다.
7. 샘플앱에 Package 연결
현재 Package와 샘플앱은 같은 프로젝트내에 있지만 서로 연결되어 있진 않습니다.
Package를 샘플앱에서 사용할 수 있도록 연결작업을 진행합니다.
현재 워크스페이스 내에 2개의 pubspec.yaml 파일이 존재합니다.
각각의 pubspec은 영향범위가 다르므로 필요에 따라 적절한 위치에 추가해야 합니다. 앞으로 강의에서는 ‘샘플앱 수준의 pubspec’과 ‘패키지 수준의 pubspec’ 두가지로 용어를 구분해서 사용합니다.
1.
샘플앱 수준의 pubspec에 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
swm_flutter_package:
path: ../
YAML
복사
2.
샘플앱 디렉토리에서 아래 명령어로 pub을 업데이트합니다.
flutter pub get
YAML
복사
flutter pub get 명령어는 pubspec.yaml/pubspec.lock 파일의 내용대로 의존성을 재설치하는 명령어입니다.
8. 샘플앱에서 패키지 내용 사용하기
패키지 프로젝트를 생성하면 기본적으로 1개의 dart 파일이 생성되며 Calculator라는 클래스가 존재합니다.
7번 과정에서 패키지를 연결했으므로 샘플앱에서 Calculator를 사용할 수 있어야 합니다.
샘플앱의 main에서 Calculator를 입력하면 자동완성으로 패키지 내용을 가져올 수 있음을 확인할 수 있습니다.