뽀루뚜기의 잡다구리 기술 블로그

저번 포스팅에서는 Android Studio에서 기본 앱을 빌드하였다.

본인 콤퓨타가 느린지라 엄청 버거워하는것도 있고 Visual Studio Code의 강력한 애드온들 그리고 자주쓰니까

이젠 code에서 개발해보려고 환경 설정을 해보았다.

1. Visual Studio Code 다운로드

https://code.visualstudio.com/ 에서 다운로드 받는다.

예전에는 드림스파크에서 Visual studio를 받았던 기억이 있는데 이젠 Code를 무료로 쓰다니

마소 성님들 감사합니다.

설치는 다음 다음 다음 딱히 설정할게 없다.

설치되면 다음과 같이 나타난다.

2. Visual Studio Code 환경 설정

일단 우리는 한국인이니까 한글로 변경하도록 하겠다.

좌측 테트리스 블럭모양을 클릭하고 kor이라고 검색하면 최상단에 Korean language Pack이 나타난다.

설치한다.

설치하면 재시작 하자고하는데 마소형님들이 말씀하는건 잘 들어야한다 재시작 한다.

이젠 Flutter를 설치해보자

똑같이 검색에 Flutter를 검색하여 인스톨 한다.

이제 플루터를 설치 완료 했다.

바로 코드 작성 해도 되나

나는 이쁘고 가독성이 중요하니까 플러그인을 설치한다.

Rainbow Brackets를 검색하고 설치해준다.

이제 얼추 환경설정이 다 끝났다.

기본 프로젝트를 만들어 보자

Ctrl + Shift + P를 눌러서 flutter를 입력하여 아래 그림처럼 프로젝트 생성을 눌러주자

우리가 새로 만드는 프로젝트의 경로를 잘 만들어 줘야한다.

각자 편한위치로 지정하자.

이제 프로젝트도 만들어졌으니 애뮬레이터를 돌려야한다.

이전 포스팅에서 만든 Pixel XL를 불러올거다.

일단은 애뮬레이터를 실행해보자

명령의 입력은 프로젝트 생성과 동일하게 Ctrl + Shift + P를 통해서 넣는다

명령은 launch라고 입력하면 아래 사진처럼 Flutter : Launch Emulator를 선택해준다.

그러면 이제 어떤녀석을 돌릴지 물어본다

픽셀...픽셀을 부르자

만약 장치가 안나타난다면 이전 포스팅에서 작성한 AVD를 통해서 장치를 생성해주자

실행하면 저번 포스팅에서 만든 그녀석이 그때 그대로 나온다. 색도 보라색으로.

이제 우리가 새로만든 깡통 프로젝트는 파란색일거구 메세지도 다를거다.

이건 예전 애뮬레이터에 세이브된게 불려와서 보라색인거다.

빌드해서 새로운 프로젝트의 내용대로 바뀌는지 해보자.

F5를 눌러서 디버깅 시작을 해도되고

실행 - 디버깅 시작 

을 눌러서 해도 된다.

빌드하자

깡통 프로젝트 내용으로 핸드폰이 바뀌었다.

성공이다

이제 개발을 시작하자

Flutter(플러터) 시작하기 - 1. 환경 설정(Windows)에서 플러터 환경 설정을 다 끝냈다.

환경설정은 시작의 반이다. 반을 끝냈다 무려 1시간도 안걸려서

이제 나머지 반만 하면 앱이 뚝딱하고 나온다.

우리의 친구 Android Studio를 실행하자

우리는 플러터를 하니까 Start a new Flutter project를 클릭한다.

여기서 우린 최초 앱을 실행하는게 목적이니까 Flutter Application을 클릭 후 Next

프로젝트 이름을 정해주자. 마음에 드는걸로. 나는 자동생성을 사랑한다.

Flutter SDK Path를 설정해줘야한다.

첫번째 글에서 저장해둔 SDK위치가 기억해내야 한다.

나는 문서에다가 넣어놨으니까 그 경로대로...

뭔가 문제가 있으면 아래에 보기싫은 빨강 느낌표가 뜬다. 위에는 경로가 없댄다.

경로 써주고 치우자

Next를 누르면

이런다

말이많다. 난 자동 좋아한다 Finish

이런창이 뜨면 프로젝트 만들기는 끝 이제 돌려보자

돌리려면 애뮬레이터가 돌아야 한다.

좌측 빨강 상자에 no devices라고 한다. 없으면 만들어야지

첫번째 글에 AVD manager에서 만든 pixel XL 기억나는가? 그거 불러 오면 된다.

우측 빨간상자. 핸드폰에 귀여운 안드로이드봇 있는 아이콘 눌러주자.

창이 뜨고 빨강 상자의 플레이버튼을 누르자

축하합니다. 당신은 공짜 픽셀 핸드폰이 생겼읍니다.

이제 다시 Android Studio를 보면 장치가 생겼을거다.

좌측 빨강박스처럼 sdk gphone x86 arm이 생겼다. 이제 오른쪽 빨강박스의 시작버튼을 눌러주자

빌드를 기다리면 위에처럼 애뮬레이터에 기본 앱이 실행된걸 확인 할 수 있다.

완성이다.

라면 아쉬우니 색이랑 메세지만 바꿔보자.

이게 원본 코드이고 우리는 아래처럼 수정해 주자.

21번째 라인에서 Colors.purple로 바꿔주자.

Colors.에서 .을 지우고 다시 쓰면 자동완성으로 선택할수있는 색이 나타난다

난 보랏빛이 좋아

23번째 라인에서 타이틀명을 바꿔주자 원하는대로

그리고 95번째 라인도 원하는 글자로 바꿔주자.

그리고 Run

색과 타이틀명, 중간 멘트가 바뀌었다.

이제 앱도 수정했다.

이런식으로 점점 늘려나가면 된다.

PC환경이 느려서 Android Studio가 버겁다

다음번엔 Visual studio code에 환경설정 후 앱을 수정해봐야겠다.