Flutter로 앱 만들기 - 3. 프로젝트 생성하고 첫번째 앱 만들기

테스트 환경 선택

Flutter로 만든 앱은 iOS, Android에서도 실행이 되면서 Chorme, Edge에서도 실행이 가능하다.

 

우리는 스마트폰 기기에서 사용할 앱을 만들거라, Android Studio에서 에뮬레이터를 실행시켜준다.

 

프로젝트 생성

터미널을 열고 다음 명령어를 입력하자

flutter create 프로젝트_이름

 

프로젝트_이름 이라는 폴더가 만들어지고 개발을 위한 환경들이 만들어졌다.

 

cd 프로젝트_이름으로 만들었던 프로젝트 폴더에 들어간 후 flutter run으로 앱을 실행시킬 수 있다.

 

첫 실행시엔 조금의 시간이 걸린다.

 

이후에는 바로 작동이 된다.

 

 

아래 + 버튼을 누르면 숫자가 카운터되는 앱이 에뮬레이터에 실행되었다.

 

이건 Flutter에서 기본으로 만들어진 앱이다.

 

이렇게 Flutter로 첫 앱을 만들었다.

 

에뮬레이터를 사용하지 않고 웹 브라우저로 테스트

 

에뮬레이터를 키지 않고 flutter run을 하면 웹 브라우저를 선택할 수 있게 된다.

2를 눌려 크롬으로 선택하면 아래와 같이 크롬에서 앱을 테스트 할 수 있다.

 

---

프로젝트 내부 주요 Directory와 File의 용도

andorid/

- 안드로이드 애플리케이션 관련 파일들이 위치하는 Directory

android/app/src/main : 안드로이드 앱의 메인 소스 코드 및 리소스가 포함된 Directory

android/app/build.gradle : 안드로이드 앱의 Gradle 빌드 스크립트 파일

 

ios/

- iOS 애플리케이션 관련 파일들이 위치하는 Directory

ios/Runner.xcwork.space : iOS 프로젝트의 Xcode 워크스페이스 파일

ios/Runner/info.plist : iOS 애플리케이션의 정보 설정 파일

 

lib/

- Dart 코드로 작성된 애플리케이션의 소스 코드가 포함된 Directory, 이 Directory에 앱의 주요 로직, 화면 구성 및 기능들이 구현

 

pubspec.yaml

- Flutter 프로젝트의 설정 파일, 프로젝트에 필요한 패키지 의존성, 앱 이름, 버전, 아이콘, 폰트 등의 정보가 정의되는 곳

 

assets

- 리소스 파일(이미지, 폰트 등)을 저장하는 Directory, 이 Directory에 있는 리소스들은 pubspec.yaml 파일에 명시되어야 Flutter 앱에서 사용 가능