[Flutter] 설치하기(Mac OS) 총 정리

안녕하세요.

Flutter 앱을 만들어 볼건데요.

운영체제는 기왕이면 안드로이드 앱과 iOS 앱을 모두 만들 수 있는 Mac OS 를 추천 드립니다.

제가 쓰는 글은 Mac 을 기준으로 작성됐습니다.

1. Flutter 설치하기

flutter 앱을 만들기 위해서 flutter 설치 및 환경 설정을 하겠습니다.

flutter 사이트에 들어가면 아래와 같은 화면이 나옵니다.

1. Flutter SDK 파일을 다운로드

글 작성 기준으로는 현재는 2.2.3이 최신 안정적인 버전이네요.

flutter_macos_2.2.3-stable.zip 파일을 다운받아 줍니다.

flutter sdk 웹사이트

flutter 설치 링크: https://flutter.dev/docs/get-started/install/macos

macOS install

2. SDK 압축 파일을 풀기

아래의 명령어를 이용해서 풀어주셔도 되고 그냥 주동으로 사용자 홈 폴더에 development 폴더 생성 후 flutter_macos_{version}-stable.zip에 있는 것을 풀어주셔도 됩니다.

# home으로 이동
cd ~
# development folder 생성
mkdir development
# 다운받은 zip 압축 해제
unzip ~/Downloads/flutter_macos_{다운받은 버전}-stable.zip

명령어를 실행해보면 폴더구조는 다음과 같이 되어 있습니다.

압축 푼 뒤의 파일 구조

3. Flutter path설정하기

이제 terminal에서 flutter 명령어를 사용할 수 있게 path를 설정해주겠습니다.

flutter 정식 사이트에서는 아래의 명령어를 사용해서 path 설정하라고 말하지만 실제 실행해보면 terminal을 실행 할 때마다 실행을 해줘야하죠.

# 해당 명령어를 매번 써줘야 한다 (비추천)
# 현재 위치 ~/development/
export PATH="$PATH:`pwd`/flutter/bin"

귀찮으므로 컴퓨터가 실행되면 자동으로 해당 명령어를 실행하도록 하겠습니다.

아래의 명령어를 사용해서 홈에 있는 파일 목록을 확인해봅니다.

# 홈으로 이동
cd ~
# 모든 파일 보이게 함
ls -al

파일 목록 예시

저는 zsh을 사용하기 때문에 .zshrc를 수정하겠습니다. 

보통 사용하는 터미널 .{이름}shrc로 네이밍된 파일이 있을 겁니다.

없다면 oh-my-zsh 사용하는 것을 추후 업데이트 하겠으니 참고 바랍니다.

 

Finder 에서 홈폴더로 이동해봅시다.

⌘(cmd) + ↑(위쪽 방향키) 버튼을 누르면 상위 폴더로 이동하니 참고 바랍니다.

홈폴더로 이동하면 .으로 시작하는 파일 이름이 보이지 않습니다.

⌘(cmd) + ⇧ (shift) + . (dot) 을 누르면 숨겨진 파일이 보일겹니다.

숨겨진 파일이 보이는 finder 뷰

.zshrc 파일을 텍스트 편집기를 사용하여 수정해줍니다.

파일의 제일 하단에 아래의 텍스트를 복사해서 붙여넣어줍시다.

export PATH=$PATH:/Users/{사용자 이름}/development/flutter/bin

이제 파일을 저장한 뒤 terminal을 껐다가 키고 아래의 명령어에 버전이 출력되면 잘 설정된겁니다.

flutter --version

flutter 버전 출력 예시

4. Xcode, Android Studio 설치하기

Xcode는 app store에서 xcode 검색하여 다운로드 받을 수 있습니다.

Android Studio 는 아래의 링크를 눌러 다운로드 받도록 합시다.

Android Studio 다운로드 링크: https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android 스튜디오

5. Flutter doctor 실행

 flutter doctor를 실행해서 모든 셋업이 끝났는지 확인합니다.

flutter doctor

명령어 실행시 아래처럼 뜰겁니다.

flutter doctor 실행 예시

error가 발생하거나 info가 있는 경우에도 run:  { 실행할 명령어 } 이런 식으로 어떤 명령어를 실행할지 알려주므로 당황하지 말고 시키는대로 하시면 됩니다. 아래 이미지 처럼요.

run: {실행할 명령어} 예시

flutter doctor에서 하라고하는대로 하다 보면 아래처럼 all clear 될 겁니다.

flutter doctor 실행 예시2

 

2. 에디터 설정 - VS Code

취향에 따라 에디터를 설정해줍니다. (Android Studio OR Intellij OR VS Code)

저는 Android Studio나 Intellij 사용시 컴퓨터가 느려지는 것을 느꼈기 때문에 VS Code를 설정해 줄 것입니다.

VS Code 설치 링크: https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

앱을 다운 받은 뒤 finder를 열어서 download에 있는 Visual Studio Code 앱을 으용 프로그램 폴더로 드래그&드롭해줍니다.

파인더에서 앱을 응용 프로그램 폴더로 넣어준다

 

Flutter와 Dart 플러그인 설치

1. VS Code를 시작하세요.
2. View > Command Palette…를 호출하세요.
3. “install”를 입력하고, Extensions: Install Extensions를 선택하세요.
4. 확장 검색 필드에서 “flutter”를 입력하고, 리스트에서 Flutter를 선택한 뒤, Install을 클릭하세요. 이렇게하면 필수 Dart 플러그인도 함께 설치됩니다.
5. (optional) 확장 검색 필드에서 awesome flutter snippets를 검색해서 설치해줍니다. 이 플러그인은 flutter의 단축어로 코딩을 할수 있게 도와줍니다.
6. VS Code를 다시 로드하기 위해 Reload to Activate를 클릭하세요.
7. Reload to Activate을 눌러 VS Code를 다시 시작하세요.

확장검색 필드에서  flutter 설치

확장검색 필드에서  awesome flutter snippets 설치

Flutter Doctor로 설정 확인

1. View > Command Palette…를 호출하세요.
2. “doctor”를 입력하고, Flutter: Run Flutter Doctor를 선택하세요.
3. OUTPUT 창의 출력에 아무 문제가 없는지 확인하세요.

 

3. 앱 생성 - Terminal

앱을 생성하기 위해 터미널을 켜줍니다. 

myapp이라는 앱을 만들어 주겠습니다.

Mac에서 Terminal 시작시 홈 위치 일텐데요.

저는 관리하기 쉽도록 workspace 폴더를 만들어 준 뒤 그곳에 myapp 을  생성하도록 하겠습니다.

# workspace folder 생성
mkdir workspace
# workspace folder로 이동
cd workspace

# flutter app 생성
flutter create myapp

위의 명령어 실행 시 아래 이미지와 같이 출력이 뜨면 정상입니다.

실행결과 스크린샷 1

실행결과 스크린샷 2

 

4. 앱 실행해보기

에디터를 열어줍니다.

저 같은 경우 VS Code를 설치했기 때문에 VS Code를 실행하겠습니다.

폴더열기 버튼을 눌러서 myapp폴더 클릭 후 열기를 누르거나

상단 툴바 > 파일 > 열기 메뉴를 통해 myapp을 열어봅시다.

myapp 열기

VS Code의 좌측 최상단의 파일 아이콘(탐색기 메뉴) 클릭 후 lib 폴더에 있는 main.dart 를 더블클릭하면 아래와 같은 화면이 나옵니다.

VS Code 화면 예시

Xcode에서 Simulator를 열어주거나 아래의 명령어로 생성되어 있는 시뮬레이터를 열어줄 수 있습니다.

(Android Studio에서 emulator를 실행시켜도 됩니다)

최소 한번은 xcode simulator와 android studio emulator를 설정 후 실행해보셔야 합니다.

open -a simulator

이제 VS Code에서 우측 상단에 있는 세모난 재생버튼을 눌러주면 아래와 같은 화면을 시뮬레이터에서 볼 수 있습니다.

Simulator 실행 화면

그럼 수고하셨습니다.

아래는 참조한 링크니 궁금증이 있다면 찾아보기시 바랍니다.

 

5. 참조한 링크

https://flutter.dev/docs/get-started/install/macos

macOS install