[VSCode] Flutter VScode 연동 개발환경 설정하기(vscode, android studio, flutter sdk)

1. Flutter SDK 설치

Windows

1. Flutter 공식 웹사이트에서 최신 Flutter SDK를 다운로드합니다

1. 다운로드한 zip 파일을 원하는 위치에 압축 해제합니다 (예: C:\src\flutter)
2. 환경 변수 설정:
   • '시스템 환경 변수 편집' 검색 후 실행
   • '환경 변수' 클릭
   • 사용자 변수의 'Path'를 선택하고 '편집' 클릭
   • '새로 만들기'를 클릭하고 C:\src\flutter\bin 경로 추가

2. Android Studio 설치

1. Android Studio 공식 사이트에서 다운로드

1. 설치 프로그램 실행 및 기본 설정으로 설치 진행
2. Android Studio 실행 후 초기 설정:
   • Setup Wizard에서 'Standard' 설치 타입 선택
   • Android SDK, Android SDK Platform, Android Virtual Device 자동 설치

3. Android SDK 설정

1. Android Studio 실행
2. 'More Actions' > 'SDK Manager' 선택
3. 'SDK Platforms' 탭에서 최신 Android 버전 체크
4. 'SDK Tools' 탭에서 다음 항목 체크:
   • Android SDK Command-line Tools
   • Android SDK Build-Tools
   • Android SDK Platform-Tools
   • Android Emulator
5. 'Apply' 클릭하여 설치

4. Flutter Doctor 실행

터미널(또는 명령 프롬프트)에서 Flutter 환경 점검:

flutter doctor

이 명령어는 설치 상태를 확인하고 추가로 필요한 작업을 알려줍니다.

5. Android 라이선스 동의

flutter doctor --android-licenses

모든 라이선스에 대해 'y'를 입력하여 동의합니다.

6. VSCode에 Flutter 확장 프로그램 설치

1. VSCode 실행
2. 왼쪽 사이드바에서 확장(Extensions) 아이콘 클릭 (Ctrl+Shift+X)
3. 'Flutter' 검색 후 설치 (Dart 확장도 자동으로 설치됨)
4. VSCode 재시작

7. Flutter SDK 경로 설정 (필요시)

VSCode에서 Flutter SDK를 인식하지 못하는 경우:

1. Ctrl+Shift+P (macOS: Cmd+Shift+P)로 명령 팔레트 열기
2. 'Flutter: Change SDK' 검색 및 선택
3. Flutter SDK 설치 경로 지정

8. Android 에뮬레이터 생성

Android Studio에서 생성

1. Android Studio 실행
2. 'More Actions' > 'Virtual Device Manager'
3. 'Create Device' 클릭
4. 원하는 디바이스 선택 (예: Pixel 6)
5. 시스템 이미지 다운로드 및 선택
6. AVD 이름 설정 후 'Finish'

VSCode에서 에뮬레이터 실행

1. Ctrl+Shift+P로 명령 팔레트 열기
2. 'Flutter: Launch Emulator' 입력
3. 생성한 에뮬레이터 선택

9. 설치 확인

 

 

bash

flutter doctor -v

모든 항목에 체크 표시가 되어 있으면 설치 완료입니다.

10. 첫 Flutter 프로젝트 생성

VSCode에서:

1. Ctrl+Shift+P로 명령 팔레트 열기
2. 'Flutter: New Project' 입력
3. 'Application' 선택
4. 프로젝트 이름 입력
5. 프로젝트 저장 위치 선택

또는 터미널에서:

flutter create my_first_app
cd my_first_app
code .

11. 앱 실행

1. 에뮬레이터 실행
2. VSCode에서 F5 키를 누르거나
3. 터미널에서 flutter run 명령 실행