플러터 앱 만들기 - 플러터 프로젝트 생성

자 플러터(flutter)로 앱(app)을 만들어보자.

​

사실 환경 세팅부터 포스팅하려고 했지만, 자마린처럼 서론만 얘기하다 끝날까 봐

이번 플러터 포스팅은 어떤 앱을 만들지 정하고, 바로 프로젝트 생성부터 들어가겠다.

(자마린은 오픈을 앞두고 너무 바빠져서 포스팅을 포기했었다. 현업에서는 잘 쓰고 있음)

​

자 거두절미하고 어떤 앱을 만들지 바로 정하고 프로젝트 생성 들어간다!

​

어떤 앱을 만들 것인가?

​

우선 복잡한 서비스 앱을 제작은 포스팅에 사용하기는 어렵기 때문에

나는 아주 간단하게 아래 닭갈비 매장을 홍보하는 앱을 만들어보겠다ㅋㅋ

​

​

메뉴는 가게 소개, 메뉴 소개, 오시는 길, 스토어로 이동 정도?

원래 기획을 다 하고 만들어야 하는데 그러면 또 기획하다 끝날까 봐 우선 만들어보겠다.

​

 

환경 점검

​

환경 세팅을 먼저 하고, Hello World부터 찍어야겠지.

환경 세팅하는 법을 알려주는 건 아니고 점검만 하고 바로 프로젝트 생성 들어가겠다.

​

인터넷에 있는 블로그들을 검색해서 플러터 설치 후

안드로이드 스튜디오 또는 비주얼 스튜디오 코드를 설치 및 환경 설정하면 된다.

​

우선 나는 MS 개발 툴과 언어(C#)로 먹고사는 사람이니까

조금이라도 익숙한 비주얼 스튜디오 코드로 개발을 진행하겠다.

(이하 VS Code라고 표현하겠음)

​

환경 세팅이 끝나면 커맨드 창에서 flutter doctor 입력하면 다음과 같이 결과가 나온다.

디바이스는 내 핸드폰인 노트 10을 연결했다.

No issues folund!가 나왔으니 상쾌하게 시작해볼까!

(안드로이드 스튜디오는 내가 설치했기 때문에 성공으로 나오는 것이며

본인이 VS Code로 개발한다면 안드로이드 스튜디오 쪽 에러가 보여도 신경 쓸 필요 없다)

​

프로젝트 생성

​

우선 비주얼 스튜디오를 실행하고 기본 프로젝트를 생성해보자.

​

메뉴 창에서 VIew > Command Pallette 또는 Ctrl + Shift + P를 눌러서

Command Palette(명령어 팔레트)를 실행한다.

위 화면처럼 명령어 팔레트가 나오면

Flutter: New Project 선택 또는 입력한다.

​

'미소숯불닭갈비' 가게를 홍보하는 앱을 만들 예정이기 때문에

앱 이름은 miso_chicken_rib 으로 정했다.

​

앱 이름을 입력하면 위와 같이 해당 프로젝트를 어디에 저장할지 결정 후

Select a folder to create the project in을 선택한다.

​

그러면 위와 같이 기본 프로그램을 만날 수 있다.

+ 아이콘을 누르면 카운트가 증가하는 프로그램으로

기존 Hello World에 비하면 꽤 난이도가 있는 것 같다ㅋ

​

기본 프로그램 실행

​

우선 실행을 해보자.

포스팅으로 보여주기 위해 핸드폰 연결을 끊고.

안드로이드 시뮬레이터로 실행해보겠다.

​

상단 메뉴에서 실행 > 디버깅 시작을 누르거나 F5를 누르면

​

디버깅할 에뮬레이터 또는 단말기(핸드폰)를 선택할 수 있다.

나는 flutter emulator를 선택해서 실행하겠다.

​

​

flutter emulator를 실행 중이라는 메시지가 나오면서

​

에뮬레이터가 실행됐다.

​

그리고 VS Code 아래를 보면 실행 중이라는 것을 알 수 있고

​

디버그 콘솔에 아래와 같이 app-debug.apk가 빌드 되었다고 나온다.

그러면 에뮬레이터에 기본 프로그램이 실행될 것이다.

​

그리고 +를 계속 누르면 카운트가 계속 증가한다.

​

자 이제 프로젝트는 생성되었고

다음 포스팅부터 닭갈비 가게를 홍보하는 앱을 하나씩 만들어보겠다.