여러분 플러터 설치까지 따라하시느라 고생하셨습니다! 이제 함께 플러터 첫 프로젝트를 만들어 볼게요. 순서는 아래와 같습니다.
1. 플러터 프로젝트 만들기
2. 앱을 빌드할 시뮬레이터 실행하기
3. 조작해보고 코드별 의미 알아보기
1. 플러터 프로젝트 만들기
맥을 사용하시는 분들은 터미널 프로그램을 실행해주세요. 윈도우를 사용하시는 분들은 명령 프롬프트를 실행해주세요. 그리고 아래 명령어를 복사 붙여넣기하고 실행시켜주세요. 아래 명령어는 여러분의 플러터 프로젝트를 자동으로 만들어 주는 코드입니다.
flutter create my_app
성공적으로 실행됐다면 아래의 코드를 복사 붙여넣기 해주세요. cd는 경로를 이동하는 명령어에요. 방금 만들어진 프로젝트 폴더로 경로를 이동하는 명령어 입니다. my_app이라는 프로젝트를 만들었으니 해당 폴더로 이동하는 겁니다.
cd my_app
프로젝트 폴더로 이동했으면 사용하시는 운영체제에 따라 아래 명령어를 복사 붙여넣기 하고 엔터를 입력하세요. 이 명령어는 탐색기와 파인더를 실행시켜주는 명령어 입니다. 실행하시면 아래 사진처럼 화면이 표시될텐데요. 이 폴더가 여러분이 지금부터 작업할 프로젝트 폴더의 경로입니다.
// 윈도우를 사용하는 경우
explorer .// 맥OS를 사용하는 경우
open .
위와 같이 폴더와 파일들이 있을텐데, 아래의 폴더들을 삭제해주세요. 프로젝트에 필요한 폴더만 남기는 겁니다.
- macos
- web
- windows
알려드린대로 앱을 만들 때 필요 없는 폴더를 삭제했다면, 이 폴더를 Visual Studio Code로 열어주세요. 아래 사진처럼 화면 왼쪽에 파일과 폴더 목록들이 노출되면 성공입니다.
이 코드는 플러터에서 만든 예제 코드로서 기본적으로 작성되어 있는 프로젝트입니다. 한 번 앱으로 실행시켜볼까요?
2. 앱을 빌드할 시뮬레이터 실행하기
왼쪽 파일 목록에 있는 [lib > main.dart]를 더블 클릭해서 파일을 열어주세요. 윈도우 사용하시는 분들은 F5를 맥을 사용하시는 분들은 fn+F5를 눌러주세요.
위와 같은 화면처럼 나오면 됩니다. Start iOS Simulator, Start Pixel 4 API 28 등의 선택지는 가상의 아이폰과 가상의 안드로이드폰을 실행시키는 선택지입니다. 가상의 휴대폰에 여러분이 작업한 앱을 실행시키는 거죠. 만약 저런 선택지가 안 나온다면 아래의 링크를 참고해주세요.
<Xcode 아이폰 시뮬레이터 실행하는 법>
https://mingzan.tistory.com/253
<안드로이드 스튜디오 시뮬레이터 실행하는 법>
https://mingzan.tistory.com/254
아이폰 시뮬레이터로 기본 프로젝트 앱을 실행시켜보죠. 윈도우 컴퓨터에서는 아이폰을 실행할 수 없으니 안드로이드폰을 선택해주세요. 아래와 같이 휴대폰 화면이 나오면 플러터 프로젝트 실행 성공입니다.
다음 강의에는 기본 프로젝트에 쓰여있는 코드를 하나씩 알아보겠습니다. 아래 링크를누르세요.
'비전공자를 위한 Flutter > 앱 개발 강의보기' 카테고리의 다른 글
| Flutter 앱 만들기 2단계 : 앱 퀄리티 높아보이는 디자인 준비하기 (0) | 2022.05.07 |
|---|---|
| Flutter 앱 만들기 1단계 : 기획하기 (0) | 2022.05.03 |
| Flutter 첫 프로젝트 - my_app 코드 간단 설명 (2/2) (0) | 2022.04.29 |
| Flutter 첫 프로젝트 - my_app 코드 간단 설명 (1/2) (0) | 2022.04.28 |
| Xcode 시뮬레이터 실행하는 법 (0) | 2022.04.25 |
댓글