Flutter 와 Android Studio 설치 (윈도우) [라이브 강의]

Flutter 와 Android Studio 설치 (윈도우) [라이브 강의]

 

Flutter 다운로드 (Windows)

Download then install Flutter 구간에서 Flutter 다운로드 압축 파일을 받아준다.

 

Flutter 다운로드 파일 압출 풀기

Flutter를 다운로드했다면 압축을 풀고 경로 설정을 src > flutter로 만들어준다.

 

Flutter 환경 변수 등록

Flutter는 시스템 속성에서 다운로드한 파일에 bin 폴더를 찾아 지정해 줘야 한다. path를 더블클릭하고 환경 변수 편집창을 찾았다면 새로 만들기 후 다운로드한 Flutter의 bin 폴더 경로를 지정해 주자!

 

Android Studio 설치 및 설정

Android Studio도 설치가 완료되었다면 시스템 속성에서 변수 이름 및 변수 값을 지정해 줘야 한다. 사용자 변수에서 새로 만들기 후 변수 이름 및 변수 값을 지정해 주자!

(변수 이름 : ANDROID_SDK_ROOT, 변수 값: C:\Users\유저아이디\AppData\Local\Android\Sdk)

 

Android Studio 플러그인 설치

Android Studio를 실행하고 Plugins에 들어가 Flutter를 검색 후 다운로드해 준다.

 

설치 확인

Windows PowerShell(명령 프롬프트)에서 아래와 같은 명령어를 입력해 본다면  Flutter 설치 상태에 대한 보고서를 받아 볼 수 있다. 보고서에 나온 오류들을 하나씩 해결해 보자!

flutter doctor

 

[X] Visual Studio - develop Windows apps

https://visualstudio.microsoft.com/downloads/ 에서 "Desktop development with C++" 워크로드를 설치하면 될 것 같습니다.

// 오류 메시지
[X] Visual Studio - develop Windows apps
X Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components

// 오류 메시지 해석
[X] Visual Studio - Windows 앱 개발
X Visual Studio가 설치되지 않았습니다. Windows 앱을 개발하는 데 필요합니다.
https://visualstudio.microsoft.com/downloads/ 에서 다운로드하십시오.
기본 구성 요소를 모두 포함하여 "Desktop development with C++" 워크로드를 설치하십시오

 

[X] Android toolchain - develop for Android devices

flutter config --android-sdk + Android SDK Location 주소를 Windows PowerShell(명령 프롬프트)에서 입력해 본다면 문제가 해결될 것이다. 아래 명령어를 예시로 확인해 보자!

// 오류 메시지
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.

// 오류 메시지 해석
[X] Android 툴체인 - Android 기기용 개발
X Android SDK를 찾을 수 없습니다.
Android Studio 설치 위치: https://developer.android.com/studio/index.html
처음 시작하면 Android SDK 구성 요소를 설치하는 데 도움이 됩니다.
(또는 자세한 지침은 https://flutter.dev/docs/get-started/설치/window#android-setup를 참조하십시오.).
Android SDK가 사용자 지정 위치에 설치된 경우 사용하십시오
해당 위치로 업데이트하기 위한 'flutter config --android-sdk'.

flutter config --android-sdk "C:\Users\hsy74\AppData\Local\Android\Sdk"

 

모든 에러를 처리하고 flutter doctor를 입력하여 확인해 봤더니 새로운 오류가 발생했다.

 

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)

cmdline-tools 구성 요소가 누락되었기 때문에 안드로이드 스튜디오에서 설치해 줄 것이다. 설치가 완료되었다면 flutter doctor --android-licenses를 Windows PowerShell(명령 프롬프트)에서 입력하고 설치를 위해 동의 항목이 나오면 y를 입력해 줄 것이다.

// 오류 메시지
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
X cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

// 오류 메시지 해석
[!] Android 툴체인 - Android 디바이스용 개발 (Android SDK 버전 34.0.0)
X cmdline-tools 구성 요소가 누락되었습니다
path/to/sdk manager --install "cmdline-tools; latest"를 실행합니다
자세한 내용은 https://developer.android.com/studio/command-line 를 참조하십시오.
X Android 라이센스 상태를 알 수 없습니다.
'flutter doctor -- Android-licenses'를 실행하여 SDK 라이센스를 수락합니다.
자세한 내용은 https://flutter.dev/docs/get-started/install/window#android-setup을 참조하십시오.

flutter doctor --android-licenses

 

오류 해결

위에 모든 과정을 수행했다면 flutter doctor 명령어를 실행해 상태를 확인해 보자! 모든 오류가 해결된 것을 확인해 볼 수 있다.

 

실행

Android Studio를 실행한 후 New Flutter Project를 클릭해 준다. Generators 메뉴에서 Flutter를 선택하고 Flutter SDK path를 미리 만들어 둔 src/flutter 폴더로 선택해 주자! 마지막으로 프로젝트의 이름을 정해주면 끝이다!

 

Android를 클릭하여 프로젝트 명칭의 폴더로 이동할 수 있으며, 이동 후에는 전체적인 파일들을 확인해 볼 수 있다. 그중에서도 lib 폴더 안에 main.dart가 실질적으로 코드를 작성하는 부분이라고 보면 된다.

 

상단 메뉴에서는 사용자가 선택한 웹브라우저로 코드를 실행시켜주며, 우측 메뉴에서는 모바일 디바이스를 선택해 코드를 실행시킬 수 있다.

 

오늘 알아본 내용은 여기까지이고 Android Studio가 업데이트될 때마다 메뉴들의 위치들도 변경되니 눌러보고 익숙해질 수 있도록 노력해야 할 것 같다.