Visual Studio Code에서 Flutter 설치(Window)

Visual Studio Code에서 Flutter 설치(Window)

 

1. 사이트 접속

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

 

2. Flutter SDK 설치

 

 

위에서 버전 클릭하면 zip 파일이 다운로드 되고, 압축 풀면 flutter 폴더 생깁니다.

웬만하면 C 드라이브에 넣으면 됩니다.

 

아래 경로에는 설치하면 안 된답니다.

그래서 일반적으로 C 드라이브 경로에 많이 위치시킨답니다.

• 특수 문자나 공백이 포함된 경로 ex) C:\program Files\
• 관리자 권한이 필요한 경로 ex) C:\program Files\

 

3. 환경 변수 설정

• 환경 변수 편집 클릭

• Path - 편집
• 새로 만들기 - C\flutter\bin 추가

※ C 드라이브 말고 다른데 설치했다면 그 경로로 변경해야 함

 

 

4. Visual Studio Code 설치

https://code.visualstudio.com/

• 다운로드 클릭

 

5. Visual Studio Code에서 Flutter 설치

• 좌측 Extension 아이콘 클릭 - flutter 검색 - flutter install 클릭
• 저는 이미 설치해서 Install이 안 나오네요.

 

 

6. 프로젝트 및 애뮬레이터 생성

• 메뉴 검색 창 단축키 Ctrl + Shift + P
• flutter 검색 - Flutter: New Project 클릭

 

• 앱을 만들 거면 Aplication 클릭

 

• 프로젝트 생성할 폴더 클릭
• 저는 임의로 C 드라이브에 workspace 폴더에 flutter 폴더를 만들었습니다.

 

• 프로젝트 명 생성

 

• 조금 기다리면 main.dart 파일이 생성됩니다.
• 예제 앱 코드입니다.

 

7. 앱 실행하기

• 앱을 실행하기 위해 애뮬레이터를 선택해야 합니다.
• 에뮬레이터(Emulator)는 컴퓨터에서 가상으로 앱을 실행하는 장치입니다.
• 단축키 Ctrl + Shift + P로 검색창 엽니다.
• flutter 검색 - Flutter: Select Device 클릭

 

• emulator 설치한 게 없어서 일단 Chrome으로 진행했습니다.
• 모바일 장치로 하고 싶으신 분은 Create Android emulator 클릭하여 진행하시면 됩니다.

 

 

• 앱 실행 장치를 크롬으로 선택했으면 앱을 실행시키면 됩니다.
• 앱 실행 단축키 - 키보드 'F5' 클릭

 

 

• 기다리면 크롬 창 뜨면서 예제 코드에 있는 앱이 실행됩니다.
• '+' 클릭하면 숫자 Count 하는 앱이네요.

 

 

이렇게 하면 Visual Studio Code에서 앱 개발할 수 있는 환경이 구성됩니다.

앱 개발 가즈아~.~