[Flutter] Mac + VS Code Flutter 개발 환경 세팅

안녕하세요! 황대성입니다.

 

이번 포스팅에서는 Mac + Visual Studio Code에서 Flutter 개발환경 세팅 방법을 작성하려 합니다.

 

포스팅하기 전 준비물이 필요합니다.

• Android Studio 설치 (https://developer.android.com/studio?hl=ko)
• XCode 설치
• Visual Studio Code 설치 (https://code.visualstudio.com/)

준비물이 모두 준비되었으면 아래의 순서로 진행해주시면 됩니다.

1. Visual Studio Code의 Flutter Extension 설치하기.
2. Flutter SDK 설치 및 환경변수 설정하기.
3. Flutter Doctor 실행하여 미설치되어있는 항목 설치하기.
4. 행복하게 Flutter 코딩하기!

---

1. Visual Studio Code의 Flutter Extension을 설치합니다.

Flutter Extension

2. Flutter SDK 설치 및 환경변수 설정하기.

 

Flutter 공식 홈페이지: flutter.dev/docs/get-started/install/macos

macOS install

- 공식 홈페이지에서 SDK zip 파일을 다운로드합니다.

- SDK를 보관할 폴더를 지정한 후 SDK 파일의 압출을 풀어줍니다.

   저는 Documents/sdks에 풀어주었습니다.

cd 명령어로 해당 폴더로 이동한 후 unzip으로 sdk zip 파일을 풀어주면 됩니다!

 

- unzip이 완료되면 flutter/bin 폴더로 이동한 후 경로를 복사해줍니다.

cd flutter -> cd bin -> pwd | pbcopy (현재 경로 복사 커맨드) 순으로 입력해줍니다.

- 환경변수에 추가하기.

1. vi ~/.bash_profile 입력하여 bash_profile Open.

2. i를 눌러 insert 모드로 변경.

3. export PATH="현재 경로 붙여 넣기:$PATH"를 입력해줍니다.

4. esc를 누른 후 !wq를 입력하여 저장 후 종료합니다.

위 사진을 참고하세요!

- 변경한 환경변수 저장하기

source ~/.bash_profile를 입력하여 저장합니다.

 

- 환경변수 설정을 끝낸 후 기존에 켜져 있던 터미널과 Visual Studio Code를 재시작해줘야 합니다.

 

3. Flutter Doctor를 활용하여 미설치되어있는 항목들을 설치해야 합니다.

 

- 재시작한 터미널 창에서 flutter doctor를 입력해줍니다.

 

환경변수가 정상적으로 설정되어있다면, 다음과 같은 항목들이 나옵니다.

Flutter Doctor 실행 시 모습(이미지 원본 - https://skuld2000.tistory.com/83)

- x 표시가 되어있는 부분을 체크 표시로 바꾸기

 

1. 제일 먼저 Android Studio에서 Flutter plugin을 설치해줍니다.

2. Preferences -> Plugins에서 Flutter를 설치해줍니다.

3. license 문제 해결하기

이미지 원본 - https://skuld2000.tistory.com/83

해결방법은 터미널에서 flutter doctor --android-licenses 명령어를 입력한 후 모두 동의를 하여 설치하면 끝입니다!

 

4. cocoapods 설치

이미지 원본 - https://skuld2000.tistory.com/83

이 또한 터미널에서 sudo gem install cocoapods 명령어를 입력한 후 설치하면 끝입니다.

 

5. 모두 정상적으로 작동하는지 확인하기

 

모두 설치했다면 flutter doctor를 재입력하여 모두 체크표시가 되어있는지 확인합니다!

이렇게 뜬다면 성공입니다!

---

위의 순서대로 모두 진행하여 성공하셨다면 Flutter 개발환경 세팅은 끝입니다!

 

제가 처음 했을 때 어려움을 겪은 부분이 많아서

Flutter를 시작하는 분들이 저와 똑같은 어려움을 느끼지 않았으면 좋겠다는 마음에 포스팅했습니다!

 

혹여나 글을 따라 하는 도중 다른 오류가 발생한다면 댓글을 달아주세요!

최대한 빨리 답변드리도록 노력하겠습니다 ㅎ

 

모두 재미있고 즐겁게 행복한 코딩 해요!

 

이상 포스팅을 마치겠습니다!

오늘도 긴 글 읽어주셔서 감사합니다 ㅎㅎ

---

참고한 블로그 및 웹사이트

 

Flutter 공식 홈페이지 - flutter.dev/

Flutter 강좌 3 - skuld2000.tistory.com/83

MAC OS 환경변수 설정하기 - 3months.tistory.com/537