[Flutter] 구조

개요

이번 포스트에서는 Flutter 프로젝트를 생성해 보고, 주요 파일 및 폴더에 대해서 알아봅니다.
또한 생성한 프로젝트를 실행하여 Flutter의 앱을 에뮬레이터에 표시해 보겠습니다.

개발 환경

Flutter의 개발 환경 설정에 관해서는 이전 블로그 포스트를 참고해 주시기 바랍니다.

• [Flutter] 개발 환경설정 (Mac OS)

[Flutter] 개발 환경 설정(Mac OS)

개발 언어

Flutter 개발을 위해서는 dart를 선학습 하시는 게 필요합니다. 아래 링크는 dart 공식문서입니다.

https://dart.dev/language

Introduction to Dart

프로젝트 생성

그럼 이제 Flutter의 새로운 프로젝트를 생성해 봅시다.
VSCode에 접속후 프로젝트를 생성하고 싶은 폴더를 열고 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

# flutter create [Project Name]
flutter create first_project

프로젝트명은 소문자와 _를 사용하는 스네이크 케이스(Snake case)를 사용해야 합니다.

주요 폴더 및 파일

그럼 이렇게 생성된 Flutter 프로젝트의 주요 폴더 및 파일을 확인해 봅시다.

pubspec.yaml

이 파일은 Flutter 프로젝트의 메타 데이터를 정의하고 관리하는 파일로써, Node의 package.json과 비슷한 역할을 합니다.

Flutter에서는 이 파일을 사용해서 프로젝트의 버전을 관리하고, 서드파티 라이브러리나 디펜던시를 관리합니다.

iOS/Android/Web 폴더

Flutter는 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있습니다. 이 때, 각 플랫폼과 관련된 프로젝트와 파일들이 iOS 폴더와 Android 폴더에 저장되어 있습니다. 최근에는 Web 플랫폼도 지원하게 되었으며, Web 플랫폼을 지원하기 위한 파일, 폴더들은 Web이라는 폴더에 저장되어 있습니다.

우리는 Flutter로 앱을 개발할 때, 이 폴더 안에 내용을 수정할 일이 없지만, 앱을 배포할 때에는 이 폴더 안에 내용들을 수정하게 됩니다.

 

lib 폴더

앞서 말씀드린 하나의 코드 베이스를 저장하는 폴더가 바로 lib 폴더입니다.

앞으로 이 폴더안의 .dart 파일을 사용해서 앱을 개발합니다. main.dart 파일이 Flutter 프로젝트의 시작 파일입니다. Flutter는 이 파일을 기준으로 앱을 빌드하고 실행합니다.

test 폴더

test 폴더는 lib 폴더에 Dart를 사용하여 작성한 Flutter 앱을 테스트하기 위한 코드를 저장하는 폴더입니다.

프로젝트 시작

그럼 이렇게 생성된 Flutter 프로젝트를 실행하여, 에뮬레이터에 표시해 보도록 하겠습니다.

에뮬레이터 열기

iOS의 시뮬레이터 또는 안드로이드의 에뮬레이터를 실행하기 위해서 VSCode에서 command + shift + p를 눌러줍니다.

그리고 flutter를 입력해서 검색하면, Flutter: Launch Emulator를 찾을 수 있습니다.  
클릭해 보면 다음과 같이 에뮬레이터를 선택하는 화면이 나옵니다.

기본적으로 iOS의 시뮬레이터와 안드로이드에 생성한 에뮬레이터를 확인할 수 있습니다. 실행하고 싶은 에뮬레이터를 실행합니다. 저는 여기서 iOS의 시뮬레이터를 선택하였습니다. 다음과 같이 시뮬레이터가 잘 실행되는 것을 확인할 수 있습니다.

프로젝트 실행

그럼 이제 실행된 시뮬레이터에 Flutter 앱을 실행해 봅시다.
VSCode에서 lib/main.dart 파일을 선택하여 Dart 파일을 엽니다.

그런 다음 다시 command + shift + p 키를 누른 후,  Debug: Start Debugging를 찾은 후, 선택합니다.

그럼 빌드가 실행된 후, 다음과 같이 화면에 Flutter가 기본적으로 제공하는 앱이 시뮬레이터에 표시되는 것을 확인할 수 있습니다.

VSCode 터미널에서 명령어를 실행하여 Flutter 프로젝트를 실행할 수도 있습니다.

flutter run

완료

Flutter를 사용하여 새로운 프로젝트를 생성하고, 생성된 프로젝트의 주요 파일과 폴더를 살펴보았습니다.
VSCode를 사용하여 에뮬레이터를 열고, 프로젝트를 실행하는 방법에 대해서도 알아보았습니다.

 

이 포스트에서 사용된 소스 코드는 아래 깃헙주소에서 확인할수 있습니다.

• GitHub: https://github.com/hong1995/Flutter_Post

GitHub - hong1995/Flutter_Post