본문 바로가기
개발/flutter

flutter + vscode 개발 환경 세

by hyperhand 2021. 12. 22.

1. 아래 경로로 들어가 현재 설치된 OS 선택. 현재 윈도우 설치돼 있으므로 Windows 선택

https://docs.flutter.dev/get-started/install

 

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

 

 

 

 

 

2. Flutter SDK 다운로드

 

3. 다운로드한 파일을 적당한 위치로 이동하고 압축풀기

 

 

 

 

 

4. 윈도우 콘솔창에서 Flutter 명령어들이 실행되도록 하기 위해 환경변수에 flutter/bin 경로 추가.

5. 콘솔창을 열어 'flutter doctor' 명령을 실행한다. 이 명령은 환경 체크 후 플러터 설치 상태에 대한 리포트를 보여준다. 현재 안드로이드 스튜디오가 설치돼 있지 않아 안드로이드 스튜디오를 설치한다.

6. 안드로이드 스튜디오 설치 후 다시 'flutter doctor' 실행했지만 Android toolchain 관련 에러 메시지 2개가 떠 있다. 이것들도 해결해야 한다. 먼저 'cmdline-tools 컴포넌트가 없다' 라는 메시지부터 처리하기 위해 안드로이드 스튜디오를 실행해서 File - Settings... - Appearance & Behavior - System Settings - Android SDK - SDK Tools 탭 선택 후 'Android SDK Command-line Tools (latest)' 체크 후 설치한다. 이 후 다시 'flutter doctor' 실행.

7. cmdline-tools 문제는 해결됐고, 남은 경고는 'flutter doctor --android-licenses' 명령 실행을 처리. 모든 질문에 'y' 입력. 다시 체크.

 

 

 

 

 

 

8. 안드로이드 스튜디오 실행 후 AVD Manager 버튼 클릭해서 아래 절차를 통해 가상 디바이스 생성.

Create Virtual Device... 클릭
아무 디바이스 선택하고 Next 클릭
이미지 선택. 선택할 이미지가 없다면 'Download' 클릭해서 설치 후 선택. 그 다음 Next 클릭
Finish 클릭

 

 

 

 

 

9. VS code 실행 후 View - Command Palette... 클릭

10. 'install' 이라 입력 후 'Extensions: Install Extensions' 클릭

 

11. 좌상단에 flutter 입력 후 첫번째 Flutter 클릭해서 인스톨.

 

12. View - Terminal을 클릭한 후 'flutter doctor' 명령을 실행하여 다시 한번 문제가 없는지 체크한다.

 

13. View - Command Palette... 클릭 후 'flutter' 입력한 다음 'Flutter: New Project' 클릭

 

14. Applicaiton 클릭한 다음 새 프로젝트 폴더에 대한 부모 디렉토리를 생성하거나 선택.

 

15. 프로젝트명을 임의로 입력하고 엔터.

 

 

 

 

 

16. 화면 우하단에 앱을 실행할 디바이스가 표시되어 있는데 이 부분을 클릭해서 앞서 안드로이드 스튜디오에서 생성한 디바이스를 선택한다. 그럼 잠시 후 에뮬레이터가 실행된다.

 

17. Run - Start Debugging을 클릭하거나 F5를 눌러 앱을 실행해본다. 초반에는 필요한 SDK 등을 설치할 수 있기 때문에 다소 시간이 오래 걸릴 수 있다.

 

 

18. 여기까지 문제없이 수행됐다면 설치 환경 구성 완료.

반응형