🧑‍💻Flutter 시작하기

1. 새로 프로젝트를 생성하고, 테스트 어플 실행하기

먼저 VS Code를 실행시켜줍니다.

왼쪽 하단의 세팅(⚙️) -> 명령파레트 클릭해주세요.

Flutter 검색 후 New Project를 생성해줍니다.

Application 선택 후, 원하는 위치 선택 후 어플 이름을 적어줍니다.

프로젝트명은 영어의 소문자로 시작하여야하며 영어 소문자, 숫자, underline(_)으로 구성할 수 있습니다. 새 프로젝트를 생성하고, 테스트 앱을 실행시켜봅시다.

빨간 네모 부분을 클릭하여 어플리케이션을 실행할 디바이스를 선택합니다. 프로젝트 내 터미널에서 아래 명령어를 통해 앱을 실행시켜줍니다.

flutter run

테스트 앱이 정상적으로 실행되었습니다.

2. 기존의 프로젝트를 불러와 실행하기

메인 내 [열기] 클릭, 최근 항목에 있다면 바로 클릭하여 실행하는 것도 좋습니다.

실행할려는 프로젝트의 경로로 이동하여 프로젝트 폴더를 선택후 열기 클릭합니다. 디바이스를 선택하고, 앱이 정상적으로 실행되는지 확인합니다.

3. 플로터 프로젝트구조 알아보기

프로젝트 탐색 창을 살펴보면 열 폴더와 파일들이 있습니다. 주로 사용하는 폴더의 특성은 다음과 같습니다.

폴더
내용
비고

android

안드로이드 프로젝트 관련 파일

안드로이드 스튜디오로 실행 가능

iOS

iOS 프로젝트 관련 파일

엑스코드로 실행 가능(맥 전용)

lib

플러터 앱 개발을 위한 다트 파일

플러터 SDK 설치 필요

test

플러터 앱 개발 중 테스트 파일

테스트 편의성 제공

주로 앱의 관련된 lib 폴더내의 dart 파일로 작성되지만 andriod와 iOS 설정은 각각의 폴더내 파일로 설정이 가능합니다. 다음으로는 주로 사용되는 파일들의 특성입니다.

파일
내용

pubspec.yaml

패키지, 이미지, 폰트 설정

README.md

프로젝트 소개

.gitignore

깃(git)에 커밋, 푸시 등 소스 코드를 업로드할 때 필요 없는 파일 기록

.metadada

Flutter SDK 정보

.packages

Flutter SDK에 사용하는 기본 패키지 경로

first_flutter_app.iml

파일이 자동으로 생성될 때 만들어지는 폴더 위치

pubspec.lock

pubspec.yaml 파일에 적용된 패키지 위치

pubspec.yaml, README.md, .gitignore 파일은 사용자가 직접 관리해주어야하고 나머지 하위 4개의 파일은 자동으로 설정되므로 직접 수정하지 않아도 됩니다.

4. VS code 색 테 설정 바꾸기

가독성을 위해서는 밝은 테마를 추천드리지만, 장시간 사용할 예정이라면 어두운 버전을 추천드립니다.

Last updated