VSCode에서 Flutter 시작하기

Flutter를 처음 시작하게 되었다.

 

툴로 안드로이드 스튜디오와 VSCode 중 무얼 선택할까 고민을 하다가 vscode로 선택!

안드로이드 스튜디오를 사용하다 고생한 경험이 있어 다시는 쳐다보고 싶지 않았다,,

 

어느 컴퓨터에서도 다시 Flutter 시작 환경을 만들 수 있도록 남긴다

 

1. Flutter SDK설치

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

Install

Flutter 공식 홈페이지에 들어가서 운영체제에 맞는 SDK를 다운로드한 후 압축을 푼다.

압축을 푼 뒤, bin폴더에 들어가 주소를 복사한 후 환경변수 설정을 하러가자

 

PC 검색창에 '시스템 환경 변수 편집'을 검색해 들어간다.

고급 > 환경변수 > 사용자 변수 > Path 클릭 후 편집

새로 만들기를 눌러 아까 복사해둔 bin폴더 주소를 넣어준다.

 

이후 cmd창에서 flutter를 쳤을 때, 아래와 같은 화면이 나온다면 설치 완료!

2. 안드로이드 스튜디오 설정

안드로이드 스튜디오는 미리 설치해 두었기 때문에 AVD를 만들러 가자

AVD는 Android Virtual Device로 안드로이드 에뮬레이터를 의미한다. 나중에 만든 어플을 실행해볼 수 있다

안드로이드 스튜디오를 실행 후, More Actions에서 AVD Manager를 선택하자

Create Virtual Device를 클릭 후 원하는 기기 선택 

원하는 걸로 다운로드 후 Next -> Finish 누르면 에뮬레이터 추가 끝

 

3. VSCode 설정

VSCode에서 Flutter를 사용하려면 Flutter 플러그인과 Dart 플러그인을 설치해주어야 한다.

확장 프로그램에서 Flutter를 검색해 설치하면 두 플러그인이 모두 설치된다.

 

Flutter를 사용할 수 있는 설정이 다 완료되었는지 체크하기 위해 Flutter Doctor를 실행해보자

보기> 명령 팔레트 선택 후 Flutter를 입력해 Flutter: Run Flutter Doctor를 선택

Flutter Doctor가 실행되면 검사 후 결과를 알려준다

무언가 문제가 있는 부분이 있다면 차근차근 고쳐나가 보자,,

문제가 없다면 프로젝트를 생성하기 위한 모든 준비 완료!

 

Flutter 앱을 만들기 위해서는 보기> 명령 팔레트 선택 후 Flutter입력

Flutter:New Project > Application 선택 후 폴더를 지정하고 프로젝트 명을 입력한다.

그러면 다음과 같은 상태로 새 프로젝트가 열린다

명령 팔레트에서 Flutter:Launch Emulator를 선택하거나

VSCode 우측 하단 핸드폰 모양이 있는 쪽을 클릭해 실행 기기를 선택할 수 있다.

여기서 아까 만든 AVD를 선택!

Run > Run Without Debugging 혹은 F5를 눌러 에뮬레이터를 통해 앱을 확인할 수 있다.

 

 

프로젝트 시작의 길은 멀고도 험하구나,,,, 이제 차근차근 Flutter를 익혀보자,,,