윈도우 플러터(Flutter) 개발 환경 세팅 해보자

오늘은 윈도우에서 플러터 개발 환경 세팅을 한번 해보았다

 

난 어플을 열심히 만들기로 다짐 했으니까

 

어플 100개 만들기 프로젝트 할끄니까!

 

첫 시작은 역시 개발 환경 셋팅이니까 자 들어가보자고~

 

 

먼저 할일은 플러터 SDK 설치

 

1. 플러터 SDK 설치

 

https://docs.flutter.dev/release/archive?tab=windows

Flutter SDK archive

 

일단 위의 링크로 들어가서

 

 

 

윈도우를 선택하고 그래도 안정적이게 스테이블에서 가장 최신 버전 3.24.3 선택

 

선택하면 아래와 같이 압축 파일이 다운로드 된다

 

 

 

다운 받은 후에 C 드라이브에 압축을 풀고

 

 

이렇게 반디집을 이용해서 압축 해제

압축 해제하면 뿅 하고 flutter  폴더가 생김 

 

이러면 Flutter SDK 설치는 끝!!

 

그 다음 단계 SDK 설치를 끝냈으니 자바나 이런 것 처럼 환경 변수 설정을 해줘야하는데

 

방법은 아래와 같은데

 

2. 환경 변수 설정

 

 

먼저 환경 변수를 등록 하려면 경로가 필요하기 때문에 경로를 찾아보자~

 

내 컴퓨터 들어가서 C에서 압축 해재 해둔 flutter 폴더의 bin 폴더 까지 들어간 후

 

네모 박스를  클릭 하면 C:\flutter\bin  이렇게 경로가 보이고 이걸 복사 해둔다

 

그후에 환경 변수 설정위해 설정 페이지 이동

 

환경 변수 설정 은 먼저

 

검색에 시스템 검색해서 시스템 환경 변수 편집 선택

 

 

시스템 속성에서 > 고급 > 환경 변수 선택

 

환경 변수를 선택하면 아래같은 창이 하나 더 뜨는데 거기서

 

환경 변수 -> 시스템 변수 -> 스크롤 내려서 Path 선택 후 편집 버튼 클릭

 

여기서 새로 만들기 버튼 클릭 후 복사한 C:\flutter\bin 경로 추가 후

 

확인 버튼 클릭 하면 끝!

 

 

자 이러면 어느 정도 기본 세팅은 끝난거라고 보면 되고 

 

이제 본격적으로 프로그램들을 설치 해야하는데 

 

먼저 플러터 SDK 가 잘 설치 됐는지 확인 하기 위해서

 

3. 플러터 설치 확인

 

윈도우 -> cmd 입력

 

 

명령 프롬프트 선택  하면 아래와 같은 창이 뜬다

 

그리고 창에 flutter doctor 을 치고 엔터를 누르면 아래처럼 Welcome ~~ 가 뜨는데 

 

안되면 관리자 권한으로 선택해서 똑같이 flutter doctor 를 치면 된다

 

flutter doctor 을 치고 조금 기다리면 위처럼 블라블라 뜨는데

 

빨간색 X 된거는 추가 설치가 필요하다는 뜻이고 초록색 v 는 잘 설치 된거기 때문에 신경 안써도 된다

 

설치 해야하는걸 보아하니 안드로이드 툴체인 Android toolchain 이 없다는걸 보니

 

일단 안드로이드 스튜디오 까지 설치를 해봐야겠다

 

 

4. 안드로이드 스튜디오 설치

 

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

위 링크로 들어가면 아래와 같은 화면이 뜨는데

 

바로 다운로드 버튼을 누르면 설치 파일이 다운로드 된다

 

그리고 안드로이드 스튜디오 설치 파일을 실행

 

 

넥스트~ 버튼 딸깍~

 

I'm on the next lever yeah~~

 

절대적 룰을 지켜 ~

 

제끼라 제끼라 제끼라~ 하다 보면

 

 

안드로이드 설치 완료~

 

그러고 다시 명령어 프롬프트를 실행시켜서 안드로이드가 잘 받아졌나 확인

 

flutter config --android-sdk 를 치고 확인했는데~

 

Missing argument for 'android-sdk' 라는 오류가 뜬다 

 

난 분명 안드로이드 스튜디오 잘 받고 설치 다했는데 뭐지? 하고 

 

구글 형님한테 물어봤더니

 

 

이 오류는 안드로이드 스튜디오를 실행하면 없어진다고 했다ㅋㅋㅋㅋ

 

안드로이드 스큐디오를 설치하고 실행 시키면 추가로 설치되는데

 

설치만 하고 실행을 안시키니 오류가 뜬 것 이였다

 

안드로이드 스튜디오를 냅따 실행

 

 

그러면 위처럼 컴포넌트 다운로드 알아서 진행 해준다

 

 

완료 되면 Finish 버튼 클릭

 

이러면 다 완료 된건데 

 

다시 오류가 뜨는지 확인하기위해서

 

 

그리고 이런 실행 화면이 뜨는데 여기서 more actions 선택

 

 

그러면 뭐라뭐라 뜨는데 저기서 sdk manager 선택

 

 

경로 복사

 

그리고 다시 명령 프롬프트를 실행시키고

 

flutter config --android-sdk <path-to-sdk>  이거에서

 

<path-to-sdk> 자리에 복사한 경로 붙여 넣고 엔터를 누르면

 

짜잔~ 어 일단 실행후 다시 flutter doctor 실행

 

이젠 다 됐겠지??

 

두근 두근 쿵짝짝 쿵짝짝...

 

cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`

 

라는 오류 발생

 

 

 

이건 또 뭐여...

 

역시 이럴땐 다시 구글 형님 한테 물어보니까 답이 나왔다

 

다시 안드로이드 세팅 들어가서

 

보니까 옆에 다운로드 버튼이 있는데

 

이건 다운로드가 안된 상태라는 뜻이였다 그래서 Andorid SDK command-line Tools 를 다운로드 진행

 

 

이젠 오류 안뜨겠지

 

다행이 오류가 안떴고 그 다음은 flutter doctor --android-licenses 를 실행시켜 수락을 해줘야 한다

 

명령 프롬프트를 실생 히켜서 flutter doctor --android-licenses 입력

 

 

그럼 Review licences that have not been accpted y/N?? 이 뜨는데 y 입력 후 엔터

 

 

다 y 후 엔터

 

 

후 완료! 

 

이러면 진짜 개발 세팅은 끝이다

 

그리고 마지막으로 개발을 위해 사람들이 많이 쓰는 Vs Code 까지 설치를 진행

 

5. VS Code 설치

 

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

 

각자 버전에 맞춰서 다운로드 받아서 설치 진행

 

 

설치가 끝나고 VS Code 실행 한 다음에

 

 

왼쪽 아래 Extension 에서 Flutter 개발하기 위해

 

Flutter / Dart / Prettier 설치

 

 

이러면 Flutter 개발 준비 끝!

 

 

후 이젠 진짜 개발만 남았다