Flutter 설치및 환경 셋팅 후 무지성 첫 실행

flutter 일단 실행해보자

 

소개

안녕하세요. 김과자 입니다.

어렵게 어렵게 Flutter 설치를 완료하였습니다.

지난 시간에는 오류까지 잡고 환경셋팅을 완료하였습니다. ↓↓↓

2023.06.15 - [개발 코딩 정보 공유/플루터 Flutter] - 앱개발 공룡 Flutter 설치진행 환경셋팅 방법

이번시간을 통해서 '일단 무지성 실행' 목표에 도달하게됩니다.

 

실행하기

일단 무지성 실행을 위해 아래의 세 가지 방법을 이용하겠습니다.

1. 터미널
2. 안드로이드 스튜디오
3. VS Code

 

터미널

맥 기준으로 터미널을 열어줍니다. 아래의 커맨드를 입력하겠습니다.

>flutter create my_app
>cd my_app

테스트 앱인 my_app 프로젝트를 생성해주고 해당폴더로 이동하겠습니다.

그리고 나서 실행할 devices 가 있어야 하겠죠?

저는 ios simulator 를 이용하겠습니다.

설치에 관해 자세한 사항은 여기를 확인하세요 ↓↓↓

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

open -a Simulator

 

ios simulator

 

시뮬레이터가 잘 오픈되었습니다. ios 을 사용하는 이유는 이쁘기 때문입니다.

그리고 나서 다시 터미널에서 아래의 커맨드를 입력합니다.

flutter run

앱이 잘 실행 되는것을 볼수 있습니다.

소스 코드를 수정하시고 터미널에서 키보드 ‘r’ 을 누르시면 hot reload 됩니다.

cnt + c 누르고 해당 세션 종료 합니다.

 

안드로이드 스튜디오 이용하기

안드로이드 스튜디오를 사용하기 위해서는 우선 안드로이드 스튜디오는 당연히 설치해 주셔야 합니다.

실행하면 왼쪽 메뉴바에 plugin 이 보입니다.

plugin 에서 marketplace 탭으로 이동합니다.

plugin

marketplace

마켓플레이스 에서 flutter 와 dart 를 검색하시고 설치해주세요.

dart, flutter 를 설치한다

그리고 나서 스튜디오를 재시작 합니다.

다시 들어온 안드로이드 스튜디오에 낮선메뉴가 보입니다.

새로운 메뉴가 보인다

자… 이걸 누르지 마시고... ???

open 으로 갑니다.

아까 만들어준 my_app 프로젝트의 루트 폴더를 open 해주세요.

main.dart가 잘 열리는걸 확인할수 있다

잘 열렸습니다. 잠시 기다리신후 상단의 메뉴바를 살펴 보겠습니다.

메뉴를 살펴보자... iphone 시뮬레이터가 보이고

ios simulator 가 보이구요.

target이 보이고

dart 를 이용해서 빌드 할 예정입니다.

실행 메뉴바도 보이고

실행, 디버그실행은 다들 알고 계시니 패스…

실행해 보시면 시뮬레이터에 잘 뜨는걸 확인할 수 있습니다.

그리고 문구를 수정해보겠습니다. 아래와 같이 변경한후...

아무 글자나 수정해주고 테스트 해본다

번개표시를 클릭해줍니다. 

번개도 보인다... 이번개가 hot reload 버튼이다.

해당버튼은 hot reload 기능입니다. 즉각 적인 화면 변경이 이루어 집니다.

기존의 안드로이드는 화면 수정후 다시 빌드 다시 빌드… 의 연속이었습니다.

간단한 작업들은 편리하고 빠르게 작업할수 있겠습니다.

 

VS code 를 이용하는 방법

vscode 를 이용하는 방법도 있습니다.

확장버튼

확장 버튼에서 dart, flutter 를 설치해주시면 됩니다.

마찬가지로 플러그인을 설치한다

그리고 나서 F1 을 누르시면

flutter 를 검색 - new project 를 클릭한다

New Project 를 클릭합니다. 알아서 설치가 되고 template 프로젝트가 구성됩니다.

아래 메뉴에 simulator 선택바가 보인다.

하단의 시뮬레이터 및 타겟 지정도 가능합니다.

상단에 보시면 벌레 모양 디버그 실행도 보실수 있습니다.

실행 해보면 잘 되는걸 확인할수 있습니다.

 

 

결론

가장 편한 방법으로 앱개발 하시면 될것 같습니다.

저라면.. vscode 로 기본 앱을 만들고 안드로이드 스튜디오로 개발을 진행하겠습니다

참고로 저는 dart + gradle 로 진행할 것이므로 위와 같이 진행하였습니다.

안드로이드 스튜디오를 사용해서 new project 만들면 java, kotlin 등을 선택하고

빌드툴도 선택하라는… 복잡한 선택지가 등장합니다. 참고 되세요~

 

+ 웹에서 직접 코딩하며 실행도 가능하다

https://dartpad.dev/?id=e7076b40fb17a0fa899f9f7a154a02e8