[Flutter on Mac] VSCode Flutter project 생성하기

새로 시작할 프로젝트의 기획 및 디자인 틀을 구성하고 나서, 이제 플러터 프로젝트를 생성해야했다.

예전에 윈도우 노트북으로 플러터 프로젝트를 vscode로 시작할 때, 안드로이드 스튜디오에서 가상 에뮬레이터를 설치하는 데에 에러가 나서 귀찮았던 기억이 있는데 맥에서는 XCode를 설치하면 별다른 추가 설치 없이 아이폰 에뮬레이터가 실행되는 것을 보고 역시 맥이 좋군! 이라는 생각이 들었다.

 

VSCode에서 플러터 프로젝트를 새로 생성하는 과정을 참고한 링크들은 다음과 같다.

[ 프로젝트 생성 관련 ] https://www.whatwant.com/entry/VSCode-Flutter-Create-Project
[ 아이폰 에뮬레이터 실행 ] https://donggyu9410.medium.com/flutter-macos-%EC%97%90%EC%84%9C-vscode%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-9249bc3b275b

 

1. 플러터 프로젝트 생성 전, Organization 등록

개발을 다 마치고 나서 앱 빌드를 할 때 앱의 고유한 domain 이름을 수정해야하는데 그 때 귀찮아지는 상황을 방지하기 위해 미리 Organization 등록을 한다고 한다.

Code -> Preferences -> Settings 들어가기

검색창에 flutter create organization 타이핑

- Edit in settings.json 으로 들어가기

settings.json

- dart.flutterCreateOrganization 부분에 "com.원하는프로젝트명" 입력하고 저장.

- 이렇게 하면 Organization 등록이 끝난다.

 

2. 플러터 프로젝트 생성하기

Command + Shift + P 동시 타이핑 =>Flutter: New Project 검색 후 클릭

앱을 만들 것이므로 Application 클릭

- 이후에 프로젝트 폴더를 만들 위치를 클릭하고 'Select a folder to create the project in'을 클릭하고

- 프로젝트폴더 이름을 지어주면 된다. 웹 서비스와 앱 서비스를 동시에 만들때는 둘을 구분해주기 위해 보통 mobile 이라고 이름을 지어준다고 한다. 따라서 나도 mobile이라고 입력해주었다.

android/app/build.gradle에 com.tikitaka.mobile 로 domain이름이 잘 설정된 것을 확인할 수 있다.

 

 

3. 아이폰 시뮬레이터로 플러터 프로젝트 실행하기

(1) 우선 VSCode 우측 하단에 mac os가 아니라 ios simulator으로 바꿔주기

원래 macos여서 클릭해서 ios simulator로 바꿔주면서 Launching simulator 중...

에러가 난다면 command + space 로 검색에서 simulator 실행해주기
혹은
터미널에 open -a Simulator 타이핑 엔터

 

(2) lib/main.dart 파일 클릭 -> Fn + F5 누르면 시뮬레이터에 플러터 프로젝트 실행됨

플러터 초기 세팅으로 시뮬레이터에 구동됨