VSCode에서 Flutter 개발 환경 구축하기

나는 평소에 Spring Boot나 React를 VSCode로 개발하고 있어서,
Flutter도 자연스럽게 VSCode로 시작해보려고 했다.

설치부터 실행까지의 과정은 공식 문서를 참고하며 하나씩 따라 해봤고,
그 과정을 캡처해 뒀으니 Flutter를 처음 시작하는 분들에게 도움이 되었으면 좋겠다.

1. VSCode 확장 프로그램 탭에서 Flutter 검색 → Install → Download SDK 클릭

 

먼저 VSCode 왼쪽의 확장 프로그램 탭에서 flutter를 검색한 후 설치하고,
Download SDK 버튼을 눌러 SDK를 다운로드한다.

나는 SDK를 C:/src/flutter 경로에 저장했다.
C: 드라이브에 src 폴더를 새로 만든 뒤, 그 안에 설치하는 방식이다.

 

💡 다운로드 중에는 다음과 같은 메시지가 뜬다:

"Downloading the Flutter SDK. This may take a few minutes."
"Initializing the Flutter SDK. This may take a few minutes."
그냥 기다리면 된다.

2. Ctrl + Shift + P → Flutter: New Project 선택

 

명령어 창에서 Flutter: New Project를 선택해 새 프로젝트를 만든다.

3. “Flutter SDK를 PATH에 추가할까요?”라는 창이 나오면

"Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?"

→ Add SDK to PATH 버튼을 클릭한다.

4. "Could not find a Flutter SDK" 창이 뜨면

 

Flutter SDK는 이미 다운로드했으니,
Locate SDK를 클릭해서 SDK가 설치된 경로를 선택해준다.
나는 C:/src/flutter를 선택했다.

한 번 지정하면 VSCode가 해당 위치를 자동으로 기억한다.

5. 템플릿 선택 화면

 

이제 프로젝트 템플릿을 선택하는 화면이 나온다.
나는 기본 템플릿인 Application을 선택했다.

템플릿 종류와 설명

템플릿 이름	설명 및 추천 상황
Application	기본 Flutter 앱 템플릿 (🟢 처음 시작하는 경우 추천)
Empty Application	주석/테스트 없는 최소 구성 (🔵 깔끔한 시작)
Skeleton Application	리스트/디테일 구조 포함 (🟡 프로토타입/학습용)
Module	기존 앱에 Flutter 모듈을 붙일 때
Package	공유 가능한 Dart 패키지 개발용
Plugin	플랫폼 API 포함 플러그인 개발용

6. 프로젝트 폴더 선택

템플릿을 고르면 저장할 프로젝트 폴더 위치를 묻는다.
원하는 위치를 선택해주면 된다.

7. 앱 실행

어떤 환경에서 실행할지 묻는 창이 나오는데,
일단은 크롬(Chrome) 을 선택해 실행해봤다.

그러면 데모 페이지가 열리고, 버튼을 클릭할 때마다 숫자가 하나씩 증가하는 화면이 나타난다.

 

프로젝트가 생성되면,

flutter run을 터미널에 입력하거나

오른쪽 상단의 ▶️ 재생 버튼을 눌러 실행할 수 있다.

 

 

---

이 글이 Flutter를 VSCode에서 처음 시작하는 분들에게
작은 참고가 되었으면 한다.