Flutter 시작 with Visual Studio Code

최근에 컴퓨터를 포맷했더니 설치할 프로그램들이 산더미가 되었다.

가뿐한 마음으로 Flutter 설치 로그를 남겨 보고자 한다.

 

이 글은 맥 환경에서 비쥬얼 스튜디오 코드에서 진행된다.

 

Flutter 를 시작하기 위해 아래의 과정들이 필요하다.

 

1. Flutter SDK 설치

2. VS Code 설치

3. Xcode 설치 (맥 전용, VS Code에서 iPhone 애뮬레이터를 사용할 수 있다.)

4. Android Studio 설치 (선택 가능. 설치 시, VS Code에서 안드로이드 애뮬레이터를 사용할 수 있다.)

5. flutter doctor 로 정상 설치 확인

6. Flutter 첫 어플 실행

 

1. Flutter SDK 설치

Flutter SDK는 플루터 공식 사이트에서 다운 받을 수 있다.

flutter-ko.dev/docs/get-started/install/macos

맥OS에서 설치

아래는 윈도우에서의 설치 안내이다.

flutter-ko.dev/docs/get-started/install/windows

윈도우에서 설치

728x90

위의 사이트에서 Flutter를 다운 받고 원하는 위치에 압축을 풀어보자.

나는 $HOME/dev/sdks/fultter 위치에 저장했다.

 

이제 환경설정을 할 차례이다. 현재의 터미널 창에서만 PATH를 설정하는 경우 아래와 같이 입력하면 된다고 한다.

 export PATH="$PATH:`pwd`/flutter/bin"

 

그러나 영구적으로 PATH 설정을 해야 뒤에 귀찮지 않으므로 영구적으로 설정한다.

기본적으로 macOS Catalina 버전부터는 $HOME/.zshrc 파일에 패스를 저장해야 한다. 이전버전은 $HOME/.bashrc 파일이라고 한다.

터미널에서 vi $HOME/.zshrc를 입력해서 파일을 오픈한다.

vi $HOME/.zshrc

 

아래와 같이 입력 후, i를 눌러 수정 후, esc로 빠져 나오고 :wq를 눌러 저장종료 한다.

 export PATH="$PATH:/Users/사용자이름/dev/sdks/flutter/bin"

 

아래의 명령어를 실행하고 터미널을 종료 후 다시 실행해 본다.

source $HOME/.zshrc

 

다시 터미널을 실행후 which flutter 라고 입력해서 flutter 위치가 출력되면 정상적으로 적용된 것이다.

 

 

2. VS Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

VS Code를 설치 후 왼쪽의 블럭 모양의 플러그인 탭을 선택 후 Flutter를 검색한다.

Install 버튼을 눌러 설치한다.

VS Code Flutter plugin 설치

 

 

3. Xcode 설치

Xcode는 App Store 어플에서 다운이 가능하다. 요즘 용량이 너무 커져서 하드웨어에 4Gb이상의 빈 공간이 있어야 설치된다. 😱

 

 

4. Android Studio 설치

Android Studio는 아래의 링크에서 다운 가능하다.

developer.android.com/studio

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

Android Studio 설치 후 실행하면 아래쪽에 Configure 버튼이 있다. Plugins를 눌러보자

Android Studio Plugins

 

 

Flutter를 검색해서 플러그인을 설치한다.

 

Android Studio Flutter plugin 설치

 

 

5. flutter doctor로 정상 설치 확인

모두 설치 후, 터미널 창에 flutter doctor를 입력한다.

Android license를 허용하지 않았다고 한다.

flutter doctor --android-licenses를 터미널에 입력하고 y를 8번 정도 입력하면 된다.

 

 

이제 Xcode에 CocoaPods를 설치해 보자.

터미널에 아래와 같이 입력하여 설치한다.

$ sudo gem install cocoapods
$ pod setup

 

다시 flutter doctor 명령어를 실행하여 잘 설치되었는 지 확인해 본다.

완벽하게 설치되었다.

 

6. Flutter 첫 앱 실행

 

VS Code를 열어보자.

VS Code 실행 화면

 

cmd + shift + P를 눌르면 아래와 같은 창이 뜬다.

Flutter: New Application Project를 선택하고 엔터.

new Flutter application

 

프로젝트를 저장할 폴더를 선택한다.

저장될 폴더 설정

 

프로젝트 이름을 입력한다.

flutter 프로젝트 이름 설정

조금 기다리면 프로젝트가 생성된다.

flutter 프로젝터 생성됨

 

cmd + shipt + P 를 눌러 애뮬레이터를 실행해 보자.

Launch Emulator 클릭 또는 엔터

 

애뮤레이터 선택. 애뮬레이터가 뜨지 않는 경우 xcode에서 애뮬레이터를 한번 실행하면 생긴다.

flutter 애뮬레이터 선택

조금 기다리면 애뮬레이터가 실행되고 VSCode 하단에 연결된 애뮬레이터가 표시되는 것을 확인할 수 있다.

여러가지 애뮬레이터를 연결하여 변경하며 사용하는 경우 하단의 애뮬레이터 이름을 누르면 변경 가능하다.

iPhone 애뮬레이터 실행

상단 메뉴 바에서 Run > Start Debugging 을 눌러 앱을 실행시켜보자.

flutter 실행

 

오랜 기다림 끝에 앱이 실행된 것을 볼 수 있다.

플러스 버튼을 누르면 가운데 숫자가 올라간다. 간단히 앱이 구현되어 있어 첫 사용자가 참고하기에 좋다.

flutter 첫 실행 화면