[Flutter] Windows 환경에서 Vscode 활용에 개발 환경 구축 및 오류 해결

EnaZero·2023년 7월 13일

[Flutter] 모바일 앱 개발

목록 보기

1/3

개발 환경 구축법은 사실 잘 쓴 블로그들이 많아서 저는 제가 약 5일동안(ㅠㅠ) 오류 문제 해결하기 위해 고군분투한 내용 위주로 적어보려 합니다.

개발 환경 구축

1. flutter SDK 설치

flutter 공식 홈페이지에 들어가서 SDK를 다운받습니다. SDK를 다운받고 압축을 해제합니다. flutter 파일 내의 bin 파일의 경로를 환경 변수 설정을 해야합니다.
저는 사용자 파일 안에다가 압축해제를 했습니다.

주소 복사를 눌러서 bin 파일의 경로를 복사하고, 시스템 환경 변수 편집으로 들어갑니다. (간단하게 앱 검색창에 치면 나옵니다)
flutter가 무사히 설치되었는지 알려면, cmd창에 flutter를 적으면 welcome 화면이 뜨는 것을 보고 알 수 있습니다.

시스템 환경변수 편집>고급>환경변수>상단 환경변수의 path 더블클릭>새로만들기>경로 붙여넣기 후 확인의 루트를 통해 환경변수를 편집할 수 있습니다.

2. Android Studio 설치

안드로이드 스튜디오 공식 홈페이지에 들어가서 다운 받고 전부 기본 설정 그대로 설치하면 됩니다. 중요한것은, 설치 경로를 손대지 않고 디폴트 값 그대로 두는것이 좋습니다. (만약 설치 경로를 바꿨다면, 이후 커맨드에서나 환경변수 설정으로 안드로이드 스튜디오의 경로를 지정해줘야합니다)
이후 실행을 위해서, avd manager에 들어가 사용할 애뮬레이터를 다운받고 virtual device를 선택하면 됩니다. 저는 Q라는 애뮬레이터를 다운받았습니다.
위의 사진에서 보다시피 상단의 device manager에 들어가서 이를 해결할 수 있습니다.

3. VScode설치

vscode를 설치하고, 좌측 메뉴바의 블럭모양 (Extensions)를 누릅니다.

사진에서는 좌측 하단에서 세번째 입니다.
extensions에 들어가 검색창에 flutter를 검색하고 설치합니다. flutter가 설치되면 dart는 자동으로 같이 설치됩니다.
설치후, ctrl+shift+p를 눌러서 커맨드창에 flutter를 검색하면 Flutter:Run Flutter Doctor가 뜹니다. 이를 눌러서 실행해주면 됩니다.

이렇게 전부 체크 표시가 되면 오류가 없는 것입니다. 하지만 x표시로 되어있거나 ! 표시가 되어있다면 이를 구글링 해서 수정해줘야 합니다.

기타 오류 해결

유명한 기본적인 오류들은 다 이미 설명이 되어있기에 흔하지 않은 오류들만 설명하자면,

1. Woah! You appear to be trying to run flutter as root. ~~ Superuser로 작동하는 경우

이 같은 경우는 vs code에 우분투를 연결해놓고 여기에 extension을 다운받은 경우에 일어날 수 있는 문제 같습니다. 자세히는 잘 모르지만, WSL:Ubuntu 20 04 과 같은 창에서 extension을 다운받는것과 일반 vscode 윈도우 환경에 다운받는 것은 다르고, 이로인해 생기는 문제 같습니다.
1. 우분투 연결을 끊거나

vscode상에서 우분투 연결해제 (새로운 윈도우 창 열기) -- 'vscode wsl연동 해제'로 구글링해볼것
우분투 지우기 ^^ 와 같은 방법이 있을 수 있을것 같습니다.

우분투에서 flutter가 작동하는 extension이라 되어있는데 왜 이러한 warning이 생성되는지는 의문이지만 저는 아예 지워버렸습니다. 혹시 더 나은 해결방법이 있다면 알려주세요....

2. Unable to find bundled Java version

검색해보니 안드로이드 스튜디오 자체의 문제같은데,
C:\Program Files\Android\Android Studio 의 경로로 가서 jbr폴더에 있는 파일들을 전부 복사해 jre 폴더로 붙여넣기 해주면 됩니다.

3. android sdk, android studio 인식을 못하는 경우 (못찾는 경우)

flutter doctor를 실행했을 때 sdk의 위치나 android studio의 위치를 인식 못하는 경우, output에 적힌 해결법을 따라 하면 됩니다.

Unable to locate android sdk가 뜨는 경우 sdk의 위치를 복사(android studio device manager옆 sdk manager - setting에 들어가면 경로를 알 수 있음) 해서 터미널에 flutter config --android-sdk="경로"입력.
1로도 해결이 안된다면 환경변수 설정에 들어가 시스템 환경변수를 새로 만들어 ANDROID_HOME 이라는 이름으로 sdk경로를 붙여넣어주면 됩니다.
android studio 설치를 인식 못할 때: android studio가 설치된 경로를 찾아 flutter config --android-studio-dir "경로" 를 터미널에 입력해줍니다. 그러면 licenses에 관해 입력하라는 것이 뜨는데, 그거 적힌 그대로 따라쳐주고 이후 뜨는 모든것들에 y를 눌러주면 해결됩니다. (flutter doctor --android-licenses)

4. cmd에서는 flutter doctor가 잘 실행이 되지만 vscode에서만 실행 오류가 생기는 경우

vscode를 지웠다가 재설치 했더니 해결됐습니다. ^^,,, 구글링을 해보니 가끔 extension이 많이 깔린 경우에 충돌로 인해 이런 경우가 일어날수도 있다는 것 같습니다.
만약 그게 아니라면, 우분투가 깔린 경우에 문제가 될 수도 있는것 같습니다. cmd 상에서는 user폴더 내에서 flutter doctor를 실행하고, 저와 같은 경우에선 vscode내에서는 ubuntu의 root 내 flutter project 에서 flutter doctor를 실행 해서 이와 같은 차이가 나는 것 같더라고요.
1번과 같은 해결을 해보고 안된다면 vscode를 재설치 해보는것을 권장드립니다.