[Flutter #9] 프로젝트 생성

프로젝트 생성

VS코드에서 View → Command Palette를 열고 Flutter : New Project를 입력해 선택을 하고 프로젝트 이름 startup_namer를 입력합니다. 폴더 선택창이 나타나면 프로젝트가 생성될 폴더를 선택하고 “Select a folder to create the project in” 버튼을 클릭해 프로젝트를 만듭니다.

 

VS코드 우측 하단을 보면 iOS용 그리고 안드로이드용 프로젝트를 생성하고 있는 것을 볼 수 있습니다. 그리고 잠시 후에 프로젝트가 생성이 된 것을 확인을 할 수 있습니다. 제대로 생성이 되었는지를 그리고 우리가 만든 개발환경이 제대로 되어 있는지 다시 한번 확인을 하기 위해서 안드로이드 에뮬레이터에서 실행을 시켜봅시다. 프로젝트가 다 생성이 되었다면 VS코드 우측 하단에 디바이스 이름이 나타날 것입니다. 안드로이드용 에뮬레이터라면 바로 실행을 시켜보고 그렇지 않으면 디바이스 이름을 클릭하면 상단 중간에 나타나는 디바이스 이름 중에서 안드로이드 용 에뮬레이터를 선택합니다. 에뮬레이터를 선택하면 에뮬레이터 윈도우가 뜹니다. 

 

VS코드 우측 상단에서 “Run Without Debugging”을 클릭해서 프로젝트를 실행해 봅니다. 다음의 그림과 같이 에뮬레이터에 프로그램이 실행이 된다면 우리는 프로젝를 시작할 준비가 완벽하게 된 것입니다.

 

 

우리가 수정을 해야 하는 파일은 lib 폴더 아래에 있는 main.dart 파일입니다. 프로그램을 배우기 위해서 main.dart에 있는 모든 파일을 지우고 새롭게 시작을 합니다. 파일의 내용을 지웠다면 다음의 코드를 따라서 타이핑 합니다.

 

타이핑을 하다보면 들여쓰기가 제대로 보기가 쉽지 않습니다. VS코드에서 마우스 오른쪽 버튼을 클릭하고 “Format Document”를 선택합니다. 

 

 

플러터로 코딩을 할 때 도와주는 몇 개의 플러그 인을 추천합니다. VS코드 좌측에서 Extension을 선택해서 다음의 확장팩들을 추가합니다. 위젯들의 기본코드를 제공해주는 Flutter Widget Snippets, 탭키를 이용해서 코딩을 편하게 해 주는 TabOut, Pubspec Assist라는 의존성을 확인해 주는 툴, Bracket Pair Colorizer2라는 괄호들을 색깔별로 표시해 주는 확장팩, 마지막으로 코멘트를 보기 좋게 해 주는 Better Comment를 각각 설치해 줍니다. 

 

확장팩을 설치하고 정리한 코드는 앞의 그림과 같습니다.