개발 창고/Flutter

[Flutter] How to Install the Flutter Part 3/3

로이제로 2023. 3. 3. 22:00
반응형

 

 

2023.02.23 - [개발 창고/Flutter] - [Flutter] How to Install the Flutter Part 1/3

 

[Flutter] How to Install the Flutter Part 1/3

1. SDK 다운로드 2. 압축해제 3. 환경변수 설정 4. 설정 확인 1. SDK 다운로드 https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating syst

royzero.tistory.com

 

2023.02.24 - [개발 창고/Flutter] - [Flutter] How to Install the Flutter Part 2/3

 

[Flutter] How to Install the Flutter Part 2/3

2023.02.23 - [개발 창고/Flutter] - [Flutter] How to Install the Flutter Part 1/3 [Flutter] How to Install the Flutter Part 1/3 1. SDK 다운로드 2. 압축해제 3. 환경변수 설정 4. 설정 확인 1. SDK 다운로드 https://docs.flutter.dev/get-

royzero.tistory.com

 


 

How to Install the Flutter

 이번 글에서는 Flutter 설치와 Android Studio 설치 이후 VS Code 설치와 플러그인을 설치하여 연결하는 방법에 대해 배워보도록 하겠습니다.

 

1. VS Code 설치

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

2. 플러그인 설치

# Flutter / Dart 플러그인

확장: 마켓플레이스 (Ctrl + Shift + X) - 검색창 "flutter" 입력 - "Flutter" 클릭 - "설치" 클릭

Flutter 플러그인 선택

 

3. 프로젝트 생성

# 명령 팔레트 (Ctrl + Shift + P) - 검색창 "flutter" 입력 - "Flutter: New Project" 클릭

프로젝트 생성

 


※ ISSUE: SDK를 찾지 못하는 경우

"Locate SDK" 클릭 - flutter 설치 경로 선택 - "Set Flutter SDK folder" 클릭

SDK 찾기 #1
SDK 찾기 #2

 


 

# "Application" 클릭

"Application" 클릭

 

프로젝트 생성 #1

# 작업폴더 선택 - "Select a folder to create the project in" 클릭

작업폴더 선택 - "Select a folder to create the project in" 클릭

 

프로젝트 생성 #2

# 프로젝트 명 "flutter_application_1" 입력

프로젝트 명 "flutter_application_1" 입력

프로젝트 생성 #3

4. 프로젝트 실행

# 명령 팔레트 (Ctrl + Shift + P) - 검색창 "flutter" 입력 - "Flutter: Launch Emulator" 클릭

 

프로젝트 생성 #4

# 디버깅 없이 실행 (Ctrl + F5)

디버깅 없이 실행 (Ctrl + F5)

 

프로젝트 생성 #5

※ 만약 아래와 같이 오류가 발생한다면

프로젝트 오류

flutter의 doctor를 통하여 이슈를 체크해보아야 합니다.

VS Code를 통하여 doctor를 실행 하는 경우

커맨드 창에서 doctor를 실행하는 경우

반응형