본문 바로가기
Flutter&Dart

플러터 개발 환경 구축(Mac, iOS), Flutter 최신버전 설치

by 밥바비 2023. 2. 2.
반응형

MacOS에서 플러터 iOS 개발 환경 세팅하는 방법에 대해 정리해보려고 한다. VSCode가 설치되어 있다는 가정하에 아래 순서를 따라 세팅을 진행하면 된다.

 

1. Flutter SDK 다운로드

링크로 접속하여 macOS를 눌러 환경에 맞는 SDK를 설치한다.

OS 별 설치 접속 화면SDK 설치 버튼
macOS로 접속한 후 SDK 다운로드

2. SDK 압축 해제

원하는 디렉터리에 앞서 다운로드한 zip 파일의 압축을 해제한다. 압축을 풀면 flutter 디렉터리가 생성된다. 이제 환경 변수에 flutter SDK 경로를 추가하여, 전역에서 flutter 명령어를 사용할 수 있도록 설정을 해주어야 한다.

3. 환경 변수 설정

터미널에서 아래 명령어를 실행하여 설정파일을 열어준다.

vi ~/.zshrc

문서가 열리면 가장 하단부에 아래와 같이 Flutter SDK가 설치된 경로를 PATH에 추가해 준다. 

export PATH=$PATH:플러터 설치 경로/flutter/bin
# ex) export PATH=$PATH:/Users/admin/workspace/flutter/bin
# ex) export PATH=$PATH:~/workspace/flutter/bin
플러터 설치 경로를 정확히 모르겠다면 터미널에서 Flutter SDK의 압축을 풀었던 디렉토리로 이동 후 pwd 명령어를 통해 해당 디렉터리의 위치를 알 수 있다.
참고 : https://velog.io/@corner3499/Mac-M1-환경변수PATH설정하기-ZSH-Ver

그 후 source 명령어를 통해 설정파일을 새로고침해준다

source ~/.zshrc

4. flutter doctor 실행

3번까지의 과정을 잘 따라왔다면 Flutter SDK 설치는 끝난 것이다. 이제 flutter doctor 명령어를 실행해 보자.

flutter doctor 실행 화면
flutter doctor 실행화면

명령어를 실행해 보면 위와 같이 xcode, android sdk, android studio 등이 설치 안되어 있다고 나올 것이다.

5. Xcode 설치

간단하게 App store를 통해 설치하면 된다. 꽤 오랜 시간이 걸리는 과정이다. Xcode를 설치한 후 다시 flutter doctor를 실행해 보면 여전히 4번 단계와 같은 결과가 노출된다. 결과창에 친절히 안내되어 있는 아래 명령어를 실행해 준다.

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

그 후 다시 flutter doctor를 실행해 보면 아래와 같이 Xcode가 설치되지 않았다는 메시지가 사라진다.

xcode 명령어 실행 후 화면
xcode 미설치 메세지 사라짐

7. CocoaPods 설치

안내 메시지에 나온 대로 CocoaPods를 설치해 주면 된다.

To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

위 링크로 접속하면 아래 명령어를 실행하라고 안내되어 있다.

sudo gem install cocoapods

명령어 실행 후 다시 flutter doctor를 실행해 보면 ios와 관련된 세팅이 모두 통과된 것을 볼 수 있다.

flutter doctor 통과화면
ios 세팅 완료!

반응형

8. 프로젝트 생성

각자 원하는 디렉터리로 이동 후 flutter create '프로젝트 명'을 실행하여 새로운 프로젝트를 하나 생성해 보자.

9. VSCode 실행

VSCode를 실행하고 flutter 확장프로그램을 설치해 준다.

flutter extension 화면
Flutter 확장프로그램 설치

10. 시뮬레이터 실행

VSCode 작업 영역에 위에서 생성한 프로젝트를 추가한 후 시뮬레이터를 연다. 시뮬레이터를 여는 방법은 2가지 정도가 있다.

명령어 실행

open -a Simulator

VSCode 우측하단 실행버튼 클릭

아래 캡처 이미지의 빨간 박스 영역을 클릭한 후 Start iOS Simulator를 클릭하면 ios 시뮬레이터가 실행된다.

Vscode 내 시뮬레이터 실행 버튼
빨간 박스 영역 클릭
시뮬레이터 실행 버튼
Start ios Simulator 클릭

11. 프로젝트 실행

이제 프로젝트를 실행해 보자. VSCode에 해당 프로젝트를 열어놓은 상태에서 상단 메뉴 - 실행 - 디버깅 시작 혹은 디버깅 없이 실행 버튼을 누르면 해당 프로젝트가 실행된다. 혹은 해당 디렉터리에서 flutter run 명령어를 통해 실행해도 된다. 

플러터 프로젝트 실행 화면
프로젝트가 정상적으로 실행된다.


안드로이드 환경 세팅은 다음 글에서 이어서 알아보도록 하자.

2023.02.03 - [Flutter&Dart] - 플러터 개발 환경 구축(Mac, Android), Flutter 최신버전 설치

 

플러터 개발 환경 구축(Mac, Android), Flutter 최신버전 설치

이전 글에 이어 Mac에서 플러터 안드로이드 개발 환경을 세팅하는 방법에 대해 정리하려고 한다. Flutter SDK 설치 과정은 이전글을 참조하면 된다. 2023.02.02 - [Flutter&Dart] - 플러터 개발 환경 구축(Mac,

do-it-bobby.tistory.com

 

반응형

댓글