[Flutter] 플러터 입문을 위한 첫 프로젝트 시작하기 (iOS & Android 화면 실행)

Flutter를 처음 시작할 때, 프로젝트 생성 및 앱 실행 화면을 확인하는 과정을 참고를 위해 메모 한다.

0. 사전 준비

Flutter 프로젝트를 실행 전 아래 도구가 필요하니 미리 설치해 두고, 설치가 되어있는지 확인하면 좋다.

도구설치 여부 확인 및 명령어

Flutter SDK	flutter --version
Xcode (iOS 실행용)	macOS에 기본 설치 후 xcode-select --install
Android Studio (Android 실행용)	설치 후 AVD 설정 필요
VS Code (또는 Android Studio)	편한 IDE 사용

터미널에서 아래 명령어로 Flutter가 잘 설치됐는지 확인합니다.

flutter doctor

 

---

1. 새 Flutter 프로젝트 만들기

터미널을 열고 프로제그를 생성할 폴더에 이동 한 후 다음과 같이 프로젝트 만들기.

flutter create 프로젝트명

 

2. VS Code 또는 Android Studio로 코드 확인

Flutter는 프로젝트 생성시 기본적으로 샘플 카운터 앱 코드를 제공한다. 그래서 바로 샘플 코드 확인이 가능하다.

VS Code 또는 Android Studio로 프로젝트 폴더를 선택해서 열고 코드 확인이 가능하다.

참고. Android Studio로 코드를 확인할 때 알아두면 좋은 점.

프로젝트를 만들고 해당 프로젝트를 Android Studio로 열면 아래와 같이 열린다. (프로젝트명: test_project)

위의 Android를 선택하여 아래와 같이 Project로 변경하면 폴더 구조를 다 볼 수 있다.

3. Android에서 실행해보기

3-1. Android 에뮬레이터 실행

Android Studio에서 AVD(에뮬레이터)를 생성 후 실행. 또는 아래 명령어로 실행할 수도 있다.(이부분 향후 추가 예정)

flutter emulators --launch <에뮬레이터 ID>

 

3-2. 앱 실행

터미널에서 다음 명령어 입력:

flutter run

4. iOS에서 실행해보기 (Mac만 가능)

4-1. 시뮬레이터 실행

Xcode에서 iOS 시뮬레이터를 실행하거나, 터미널에서 실행:

open -a Simulator

4-2. 앱 실행

flutter run

 

iOS는 처음 실행 시 pod install 또는 Xcode build settings 관련 메시지가 나올 수 있다. 오류가 발생하면 알려주는 메시지를 따라 해결하거나, flutter clean 후 다시 시도가 필요.

---

5. 샘플 앱 화면 구성

앱을 실행하면 아래와 같은 화면이 표시. (화면 캡쳐하여 넣을 예정)

• Flutter 로고
• "You have pushed the button this many times:"
• 숫자 카운터
• • 버튼

번외. 실행 오류가 날 때

#1. 캐시 정리
flutter clean

#2. 패키지 다시 설치
flutter pub get

#3. iOS 오류 시 CocoaPods 다시 설치
]cd ios pod install