Flutter 설치 - 토탈정보

 Flutter 설치

📌 설치요약

    [1] flutter (3.3.2 버전) 설치 

: Android와 iOS 앱을 하나의 코드로 구현할 수 있도록 도와주는 프레임워크

    [2] VSCode 

: 코드를 작성할 때 사용하는 에디터

    [3] Android Studio (2021.3.1.16** 버전) 설치

: Android 앱**을 개발하기 위해 필요한 IDE. 에뮬레이터 포함

    [4] Xcode 

: **iOS 앱**을 개발하기 위해 필요한 IDE. 에뮬레이터 포함

 ⭐⭐⭐👍💡 ✔️ 💻

- Windows 사용자를 위한 프로그램 설치 방법

- [잠깐] 혹시 Windows 7를 쓰신다면 아래 가이드를 따라주세요 :)

- [링크](https://www.microsoft.com/ko-kr/p/powershell/9mz1snwt0n5d?activetab=pivot:overviewtab)에 접속하셔서 Power Shell을 설치해주세요.

### **[프레임워크 설치하기]**

- 1. Flutter 설치하기

💡 Flutter 설치 과정은 일반적인 프로그램 설치와는 조금 다릅니다. 일반적으로는 `.exe` 파일등을 실행해 프로그램을 설치하는데요.

Flutter 설치는 아래와 같은 과정으로 진행됩니다.

1. zip 파일을 다운로드 받아서 적절한 경로에 압축 해제

2. 압축 해제한 flutter 폴더 경로를 환경변수에 등록

(flutter 라는 명령어가 이 경로에 있다는 것을 윈도에게 알리는 것과 같습니다)

- 1) 다운로드

1. 먼저 flutter를 설치할 폴더를 만들겠습니다.

아래 사진에서 밑줄친 부분을 폴더 경로(주소)라고 하는데요.

여기에 **한글이나 공백이 들어가면** 인식을 못하고 에러가 발생합니다.


에러를 막기 위해 `C 드라이브` 바로 아래에 `src` 라는 이름의 폴더를 생성해줍니다.


2. flutter 를 다운로드할 수 있는 [링크](https://docs.flutter.dev/release/archive?tab=windows)로 이동합니다.

[Flutter SDK archive](https://docs.flutter.dev/release/archive?tab=macos)

1. **Stable channel (Windows)**에서 **3.3.2 버전을 클릭하여 다운로드 합니다.**


💡 **아래 경고 메시지를 꼭 확인해주세요**

1. 특수문자(한글 포함)나 공백이 설치 경로에 포함되면 안된다.

2. `C:\Program Files\` 밑에는 설치하면 안된다 (상위 권한 필요)

2. 아까 만들어준 `C:\src` 폴더에 해당 zip 파일을 다운로드 해줍니다.


💡 zip 파일은 어디에 다운로드하셔도 상관 없습니다.

대신 압축을 풀어줄 때 만큼은 꼭 `C:\src` 폴더에 풀어주세요

3. 압축을 해제해주세요!


누르면 아래와 같이 압축 해제 대상 폴더를 지정하는 화면이 나옵니다.

여기서 `flutter_windows_…` 이 부분을 지워주세요.


지우고 난 경로는 아래와 같습니다. 마저 압축 해제를 눌러줄까요?


압축을 모두 해제하는 데 10-20분 정도 걸립니다.


압축 해제가 끝나고 나면 아래와 같이 flutter 라는 폴더가 생성되어 있을 것입니다.

(위에서 경로를 잘 지정해 줬다면요!)


💡 간혹가다 위에서 경로 설정을 실수해 `flutter_windows_…` 이런 이름으로 해제된 경우가 있습니다.

이 때는, 해당 폴더를 클릭해서 들어가면 비로소 `flutter` 라는 이름의 폴더를 보실 수 있습니다. 해당 `flutter` 폴더를 위 사진과 같이 밖으로 빼주세요!

(아래 환경 변수 설정을 원활히 하기 위함입니다)

- 2) 환경 변수 설정

💡 다운로드한 Flutter를 어디서든지 사용 가능하도록 설정하는 절차입니다.

1. 압축이 해제된 `flutter` 폴더로 들어가 주세요.


2. `bin` 폴더로 들어가주세요.


3. 들어가시면 `dart`, `dart.bat`, `flutter`, `flutter.bat` 과 같은 파일들이 있습니다.


💡 이들이 바로 flutter 실행 파일입니다. cmd 로 이 폴더를 열고 `flutter` 라고 치면, 여기 있는 파일이 실행됩니다.

지금은 플러터가 설치된 폴더 에서만 `flutter` 라는 명령어를 실행할 수 있습니다.

우리는 이 flutter 실행 파일을 **컴퓨터 어디에서도 모두 접근 가능하게끔**, 즉 어디에서도 `flutter` 라는 명령어를 사용할 수 있게끔 해야 합니다.

환경 변수에 flutter 가 위치한 **폴더 경로를 추가**하면, 시스템의 모든 경로에서 이 flutter 파일에 접근하고, 실행할 수 있습니다.

4. 이를 위해 우선 해당 폴더 경로를 복사하겠습니다. 위 과정을 잘 따라오셨다면 경로는 아래와 같습니다.

```

C:\src\flutter\bin

```

선택된 경로를 복사해주세요. (`Ctrl + C`)


5. 윈도우에 `환경 변수` 라고 검색합니다. (띄어쓰기도 하셔야 해요!)


6. 아래와 같은 창에서 `환경 변수` 버튼을 클릭해주세요.


7. `사용자 변수`에 `path`를 선택한 뒤, `편집` 버튼을 눌러주세요.


8. `새로 만들기(N)`을 선택하신 뒤 복사한 주소를 붙여 넣고 `확인` 버튼을 눌러주세요.


9. 켜져있는 창들을 모두 `확인` 버튼을 눌러 닫아주세요.



- 3) 설치 확인

1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.


2. 명령 프롬프트에 `flutter --version` 이라고 검색했을 때, 아래와 같은 문구가 뜨면 설치 완료!


💡 이제 시스템의 모든 경로에서 `flutter` 라는 명령어를 사용할 수 있습니다!

### **[에디터 설치하기]**

- 2. Visual Studio Code

💡 **Visual Studio Code (줄여서 VSCode)** 앞으로 실제 코드를 작성할 편집 툴입니다.

Flutter 개발은 Android Studio와 VSCode 둘 중 원하는 툴을 사용하여 개발할 수 있는데 VSCode가 더 가볍기 때문에 앞으로 수업은 VSCode에서 진행하도록 하겠습니다.

- 1) VSCode 설치

1. [링크](https://code.visualstudio.com/download)에 접속해 주세요.

2. Window 버튼을 클릭합니다.


3. 내 문서에 저장합니다.


4. VSCodeUserSetup 파일을 실행해주세요.


5. `동의합니다` 선택 후 `다음` 버튼을 눌러주세요.


6. 경로를 확인하시고, `다음` 버튼을 눌러주세요.


7. `다음` 버튼을 눌러주세요.


8. `바탕 화면에 바로가기 만들기`를 선택해주시고, `다음` 버튼을 클릭해주세요.


9. `설치` 버튼을 클릭해주세요.


10. `종료` 버튼을 클릭해주세요.


11. 아래와 같이 Visual Studio Code가 실행되면, 설치 완료!


💡 우측 하단에 한국어로 변경하라는 팝업이 뜹니다.

하지만 VSCode 사용법이나 대부분의 개발 자료는 영어로 되어 있기 때문에, 가급적 적용하지 않기를 권장 드립니다. (수업 자료도 영어 버전으로 되어있어요!)

해당 알람을 다시 보지 않으려면 `우측 톱니바퀴 ⚙` 아이콘을 누른 뒤 `Don't Show Again`을 선택해 주세요. (만약 사라져서 버튼을 누르지 못했다면 다음번에 눌러주세요!)


- 2) Extension 설치

💡 VSCode는 Flutter 뿐만 아니라 다양한 개발을 모두 할 수 있는 통합 에디터입니다. VSCode에서 Flutter 앱 개발을 하려면 VSCode에 Extension 탭에서 아래 목록의 Extension 들을 설치해야 합니다.

**Flutter** : VSCode에서 Flutter 개발 환경 지원

**Dart** : Flutter 개발 시 사용되는 Dart 개발 환경 지원

1. 좌측에 extension 아이콘(동그라미)을 선택해 주세요.


2. `flutter` 라고 검색한 뒤, 해당 익스텐션을 선택하고 `install` 버튼을 눌러 설치해주세요.


3. 위 `flutter` 익스텐션을 설치하면서 `dart` 익스텐션도 일반적으로 함께 설치가 됩니다.

`dart` 라고 검색하신 뒤 혹시 설치가 안되었다면 해당 익스텐션도 같이 설치해주세요.

`uninstall`이라고 뜨신다면 이미 설치가 된 것이니 넘어가시면 됩니다.


### **[IDE 설치하기]** ** IDE : 소프트웨어 애플리케이션*

- 3. Android Studio

- 1) Android Studio 설치

1. 해당 파일을 다운로드 하고 압축을 풀어주세요.

📁 파일 다운로드 ▼

[android-studio-2021-3-1-16.zip](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6326b547-0ac9-46de-bef9-f6de2913494a/android-studio-2021-3-1-16.zip)

2. 다운로드가 완료되면, `android-studio`를 클릭해서 실행해주세요.


3. 아래 이미지들을 모두 `Next` 버튼을 눌러 설치를 진행해 주세요.




4. `Install` 버튼을 눌러 주세요.


5. `Next` 버튼을 눌러주세요.


6. 설치가 완료되었고, `Finish` 버튼을 눌러 Android Studio를 실행해 주세요.


7. 아래와 같은 창이 뜨면 `OK`를 눌러주세요.


8. Android Studio 사용성 개선을 위해 Google에 데이터를 공유하고 싶으시다면, `Send usage statistics to Google` 버튼을 누르시고, 그렇지 않으시면 `Don't send` 버튼을 눌러주세요.


9. Setup Wizard가 실행되면, `Next` 버튼을 눌러주세요.


10. `Next` 버튼을 눌러주세요.


11. 원하시는 테마를 선택하신 뒤 `Next`를 눌러주세요.


12. 만약 계정 이름이 한글이거나 띄어쓰기가 들어가 있다면`Your Android SDK location contains non-ASCII characters` 혹은 `your path contains white space etc.` 라도 뜨며 진행이 안됩니다.

💡 에러가 없으신 분들은 `Next` 버튼을 누르고 **26 순서**로 넘어가 주세요!!


Android SDK Location 경로를 직접 만들어주도록 하겠습니다.

13. 이런 경우, 아래 그림과 같이 Android SDK Location에 `C:\Users\내 계정이름\Local`까지만 선택해 복사해 주세요.


14. `탐색기`를 열고 주소창에 붙여 넣은 뒤 엔터를 눌러주세요.


15. 현재 Local이라는 폴더에 들어와 있고, 여기에 `Android`라는 폴더를 만들어 주세요. (대문자로 시작합니다)


16. 생성한 `Android` 폴더에 들어간 뒤 `Sdk` 라는 폴더를 만들어주세요. (대문자로 시작합니다)


17. 생성한 `Sdk` 폴더 안으로 들어가 주세요.


18. 윈도우 검색창에 `명령`이라고 검색한 뒤 `명령 프롬프트`를 우클릭하여 `관리자 권한으로 실행`해 주세요. 그냥 실행하면 안됩니다!


실행할지 물어보는 팝업이 뜨면 예를 눌러서 실행해주세요.

19. 아래 명령어를 복사한 뒤 명령 프롬프트에 붙여 넣어주세요. 아직 실행하시면 안됩니다.

```bash

mklink /D C:\android-sdk

```


다음 탐색기에서 주소창을 클릭해 주세요.


주소를 복사해 주세요.


복사한 경로를 명령 프롬프트 `android-sdk` 뒤에 붙여 넣어주세요. 참고로 아래 그림과 같이 사이에 띄어쓰기가 있어야합니다.


명령어를 실행해 아래와 같이 기호화된 링크를 만들었다고 뜨면 성공입니다.


💡 Android/Sdk 폴더에 바로가기를 C 드라이브 바로 밑에 생성하는 과정입니다.

20. 다시 Android Studio Setup Wizard로 돌아와서, 아래 그림과 같이 Android SDK Location 밑에 폴더 아이콘을 선택해 주세요.


그러면 아래와 같이 경로를 선택하는 창이 뜹니다.


21. 아래 코드를 복사해서 아래 그림과 같이 경로 선택창의 주소에 붙여 넣고 `OK`를 눌러주세요.

```bash

C:\android-sdk

```


22. 이제 경로 관련 빨간 에러가 사라지고 활성화된 `Next` 버튼을 눌러주세요.


23. `Next` 를 눌러서 세팅을 진행해 주세요.


24. **License Agreement** 화면이 나옵니다. 왼쪽 밑줄 친 부분을 클릭해 모두 `Accept` 를 눌러주세요


25. `Accept` 를 모두 누르고 나면 `Finish` 버튼이 활성화됩니다. 눌러주세요.


26. 설치가 진행됩니다. 시간이 다소 소요되니 천천히 기다려주세요!


27. 중간에 `이 앱이 디바이스를 변경할 수 있도록 허락하시겠어요?` 라는 팝업이 뜨면 `예를 선택`해주세요.

28. 모든 세팅이 완료되면 `Finish`를 클릭해 주세요.


- 2) Android Command-line Tools 설치

💡 `Android Command-line Tools`는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.

1. 아래와 같이 Android Studio가 실행되면, `More Actions`를 클릭한 뒤 `SDK Manager`를 클릭해주세요.


2. `SDK Tools`를 선택해 주세요.


3. `Android SDK Command-line Tools (latest)`를 선택한 뒤 `OK`를 선택해 주세요.


4. Dialog가 뜨면 `OK` 버튼을 눌러주세요.


5. 설치가 완료되면 `Finish` 버튼을 눌러주세요.


- 3) Android Virtual Devices 설치

💡 앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.

1. `More Actions` → `Virtual Device Manager` (또는 `AVD Manager`)를 선택해주세요.


2. 이미 Device 가 있는 분들은 아래 절차를 진행하지 않으셔도 됩니다.


3. (Device 가 없는 경우) `Create Virtual Device`를 선택해주세요.


4. 기본적으로 선택되어 있는, `Phone` → `Pixel 2` 디바이스를 `Next` 버튼을 눌러 생성합니다.


5. Release Name `Q`의 `Download`를 클릭하여 가상 기기에 설치할 OS를 다운로드 합니다.

💡 R 버전은 Virtual Device에서 문제가 있다고 해요. 그래서 **Q 버전**으로 진행할게요!


6. 설치가 완료되면 `Finish` 버튼을 눌러 주세요.


7. `Q` 버전의 OS를 선택한 뒤 `Next` 버튼을 눌러 주세요.

**API Level 29**인지 확인해주세요 :)


8. `Finish` 버튼을 눌러 Virtual Device 설치를 완료 해주세요.


9. 성공적으로 추가된 Virtual Device를 확인하시고, 이제 Android Studio는 종료해주세요!


- 4) Android Licenses

1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.


2. `flutter doctor`라고 입력한 뒤 엔터를 누릅니다.

아래와 같이 `Android toolchain`의 좌측에 `[!]` 표시가 되어있습니다.


3. 문제를 해결하기 위해 `flutter doctor --android-licenses`를 복사해서 실행해 줍니다.

- **java.lang.UnsupportedClassVersionError 오류 발생시!!**


1. Android Studio → SDK Manager


1. SDK Manager → System Settings (단축키: ctrl+alt+s)


1. `Show Package Details`를 체크 후, `Android SDK Command-line Tools` 를 펼쳐 주세요.


1. `(latest)`체크를 해제해 주시고, `8.0` 버젼을 체크해 주세요. 그리고 Apply 버튼 클릭


1. 폴더명을 **[8.0]** → **[latest]**로 변경해 주세요.



4. 실행하면 라이센스에 대한 동의를 여러번 구하는데, `y`를 입력하고 엔터를 눌러 진행해줍니다.


5. `All SDK package licenses accepted` 라는 메시지가 뜨면 완료된 것입니다.


6. `flutter doctor` 를 입력했을 때 아래와 같이 `Android toolchain`의 좌측에 체크(`[v]`) 되었다면 완료!


💡 Visual Studio 는 windows 용 앱을 개발할 때 필요한 툴입니다. 지금은 Android, iOS 앱 개발만 진행하므로 신경쓰지 않으셔도 됩니다.

- 4. Xcode → 애플 정책상 맥환경에서만 사용 가능합니다 😞

💡 Xcode는 iOS 앱 개발시 필요한 툴로 macOS에서만 설치가 가능하므로 넘어가도록 하겠습니다.

💡 **[잠깐!] 그러면 window에서는 iOS 앱 개발을 할 수 없는 건가요?**

애플의 정책상 iOS 앱은 macOS에서만 개발이 가능합니다. 😂

하지만 Flutter로 작성한 코드는 Android 뿐만 아니라 iOS에서도 이용할 수 있으니 향후 macOS가 생기신다면 기존 소스코드를 그대로 사용하여 iOS 앱도 출시할 수 있습니다!

**설치를 완료하셨나요~? 잘 설치되었는지 확인해봅시다! ㅎㅎ**

- 최종 설치 확인

1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.


2. `flutter doctor` 를 입력했을 때 아래와 같이 모든 항목이 체크(`[v]`) 되었다면 설치 완료!


💡 고생하셨습니다! 원래 개발 환경을 설정하는데 시간이 많이 들어갑니다 😂

그럼 1주 차 수업 때 뵙도록 하겠습니다 🙂

 

설치하느라 고생 많으셨습니다! :) 이제 본격적으로 수업 들으러 떠나볼까요~ 😉