[Flutter] 02. VS Code로 Flutter 프로젝트 생성

VS Code를 이용하여 Flutter를 사용할 예정이므로 VS Code를 이용하여 프로젝트를 생성해 보겠습니다.

 

1. 플러그인 설치

VS Code에서 Flutter를 사용하기 위해서는 Flutter 플러그인을 설치하여야 합니다.

Flutter 플러그인을 설치하기 위해 마켓 플레이스에서 Flutter를 검색합니다.

제일 상단에 있는 Flutter 플러그인을 설치합니다.

 

2. 앱 루트 폴더 생성

프로젝트 폴더를 생성할 폴더를 생성합니다.

이때 폴더 이름은 대/소문자를 가리지 않으나, 한글이 아닌 영문으로 생성하여야 합니다.

 

3. VS Code에서 프로젝트 생성

VS Code를 실행한 후 방금 만든 루트 폴더를 열어 줍니다.

파일 → 폴더 열기로 열 수 있습니다.

 

폴더를 열었다면 새 터미널을 만들고,

flutter create 생성할 프로젝트 이름

명령어를 입력하여 프로젝트를 생성합니다.

 

이때 생성할 프로젝트 이름은 소문자만 가능하며, 공백 사용이 불가능합니다. 

언더바(_)는 사용 가능합니다.

flu라는 이름으로 프로젝트를 생성하였습니다.

 

4. VS Code에서 Android Emulator 띄우기

Android Studio가 아닌 VS Code에서 작업하기 때문에 Android Emulator를 띄우기 위한 설정이 필요합니다.

Flutter 플러그인을 설치했다면 하단에 에뮬레이터를 설정하는 부분을 확인할 수 있습니다.

 

클릭하여 사용할 디바이스를 선택합니다.

Chrome를 선택하는 경우 Android Emulator가 아닌, Web이 뜨게 됩니다.

 

만약 하단에 보이지 않는 경우 보기 → 명령 팔레트를 선택하여 Emulator를 검색합니다.

Flutter: Launch Emulator를 선택하면 에뮬레이터를 선택하거나 생성할 수 있습니다.

 

설정 후 Ctrl + F5로 실행하여 정상적으로 실행되는지 확인합니다.

정상적으로 실행된 경우에는 다음과 같은 화면이 출력됩니다.

 

5. Lint 설정 해제

Lint란?

소스코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 릐심스러운 구조체 등에 표시하기 위한 도구입니다. 규칙적인 코딩 스타일을 만들고, 런타임 에러를 줄이기 위해 사용합니다.

 

Lint는 깔끔한 코딩을 위해 사용하면 좋으나, 처음 개발을 하는 경우 지켜야 할 부분이 많아 복잡하다고 느끼고, 흥미를 잃을 수 있습니다.

따라서 익숙해진 후 사용하는 것이 좋습니다.

 

Lint 경고가 발생하지 않도록 하기 위해서는 analysis_options.yaml 파일을 수정하여야 합니다.

프로젝트에서 해당 파일을 클릭해 열어 줍니다.

 

열었다면, rules 아래에 다음 코드를 추가합니다.

rules:
  prefer_typing_uninitialized_variables : false
  prefer_const_constructors_in_immutables : false
  prefer_const_constructors : false
  avoid_print : false
  ignore_for_file : true

해당 코드를 추가하면 Lint 경고가 발생하지 않습니다.