[개발세팅] 모바일 앱/안드로이드 개발 환경을 위한 Flutter + Android Studio 설치하기

[개발세팅] 안드로이드 개발 환경을 위한 Flutter + Android Studio 설치하기

 

Flutter 개발환경 세팅

1. Flutter SDK 설치
2. Android Studio 설치
   
3. WIndows 시스템 환경 변수 등록
4. 기타 세팅

*참고: 코딩애플 설치 강의

 

 

1. 플러터 Flutter SDK 설치

플러터는 설치 exe 파일이 아닌 zip 파일로 배포되서 다운로드 받은 후 원하는(찾기 쉬운) 경로에 파일을 옮겨놓고 압축만 풀어주면 간단히 설치가 끝난다.

 

[버전별 설치 URL]
*최신 버전
https://docs.flutter.dev/get-started/install/windows#get-the-flutter-sdk

Windows install

 

*코딩애플 버전 2.8.0
https://docs.flutter.dev/development/tools/sdk/releases

Flutter SDK releases

 

---

 

2. 안드로이드 스튜디오 Android Studio 설치

실제로 코드를 짜기위한 개발 프로그램으로 안드로이드 스튜디오 설치 및 플러그인을 설치해준다.

 

[버전별 설치 URL]
*최신 버전

https://developer.android.com/studio?gclid=Cj0KCQiA0oagBhDHARIsAI-BbgcdeV5WDrkso-_0QIO0EC1-_DiExx-0G4smBN69m_DU7_d-kvNkn0gaAr41EALw_wcB&gclsrc=aw.ds

Download Android Studio & App Tools - Android Developers

 

너무 귀여운건 안드로이드 스튜디오 설치를 하니까 구글에서 '우리 안드로이드 개발 프로그램을 설치했어?' 하고 배지를 하나 발행해주는데 이런 소소한 귀여움 대만족. 💕

안드로이드 스튜디오는 exe 파일로 제공이 되어 다운로드 후 프로그램 설치 마법사를 이용해 설치해주면 된다.

android-studio-2022.1.1.21-windows.exe

 

 

코딩애플에서는 Android Virtual Device 체크 해제하고 설치하라고 했는데 그냥 Next 누르느라 나중에 알게 되었다. 문제 생기면 지우면 되니까 우선은 그대로 진행하기로 했다.

 

[설치 후 환경 세팅]

기본 스탠다드로 시작

오래 보려면 다크 버전이 눈에 편할것 같아서 다크 버전으로 시작

브이 체크되어있는 부분 각각 선택해서 우측 하단 Accept 누른 후 활성화되는 Finish 버튼 누르면 안드로이드 스튜디오 설치 완료

 

설치부터 왜 때문에 에러 팝업이 떴는데 일단 Retry 눌러줬다.

---

2-1-1. Android Studio 에서 Flutter 플러그인 검색 후 설치

 

필수 설치 플러그인은 Flutter로 끝이지만 에디터 색깔을 맞추고 싶으면 Atom OneDark Theme도 추가 설치하면 된다고 한다. 당연히 손민수 설치 완료. :)

 

2-1-2. Android Studio 에서 Atom OneDark Theme 플러그인 검색 후 설치

 

---

2-2. More Actions 에서 SDK Manager 눌러서 Android SDK Command-line Tools 설치

Android SDK Command-line Tools 체크박스 체크 후 우측 하단 Apply 클릭 > 설치 완료 후 OK로 빠져나오기

---

3. WIndows 시스템 환경 변수 등록 (맥북은 4:49 부터 영상으로 확인)

 

윈도우 키 눌러서 시작 메뉴에서 '환경 변수' 입력 후 검색 리스트의 제일 처음 나오는 '시스템 환경 변수 편집' 클릭

 

• 고급 > 환경 변수 > PC에 대한 사용자 변수 > Path > 편집 > 새로 만들기 > Flutter 압축 파일을 푼 경로의 bin 주소까지 복붙하기
• C:\AmyPrograms\flutter_windows_2.8.0-stable\bin

---

4. 기타 세팅

4-1. 크롬브라우저 필요

4-2. 개발 환경 세팅이 잘 되었는지 확인하기

 - 터미널 오픈해서 flutter doctor 입력

 - 터미널은 윈도우 기준, Powershell or cmd 검색해서 실행

• 윈도우 핫키 + R 눌러서 실행창 나오면 cmd 입력 후 확인
• cmd 창에 " flutter doctor " 입력 후 결과 확인

4-3. 플러터 닥터에서 나온 결과는 본인의 PC 환경 설정마다 다르게 나타날 수 있으므로 화면에 X자로 표기된 내용을 잘 확인한 후 구글 서치해보면 왠만한 이슈는 해결 가능할 것이다.

• Android toolchain : 자바 설치 버전이 플러터에서 지원하는 버전과 달라서 생긴 이슈
  --> JDK 11 버전을 설치하면 문제 해결 가능
• Android Studio
  --> 안드로이드 스튜디오 익스텐션을 설치하면 문제 해결 가능

 

#환경세팅이 잘 된 경우 👇

No issues found !