[Flutter]플러터 시작 및 프로젝트 구조
1. 프로젝트 생성 시 기본 화면 및 구조
- 안드로이드와 플러터를 처음 접하신 분들을 위해 간단하게나마 화면 구성을 설명드리겠습니다.
① 프로젝트 구조 : Flutter관련된 모든 프로젝트 파일을 보여줍니다.
② 소스화면 : 선택한 프로젝트 파일에 대한 소스를 보여줍니다.
③ 디버깅 및 실행 : 장치(연결된 모바일, 가상에뮬레이터, 웹, desctop)를 선택하고 실행 및 디버깅을 합니다.
④ 터미널 실행 및 디버깅 내역 : Flutter 명령어를 사용하는 Terminal 및 Debug 내역을 보여줍니다.
⑤ 에뮬레이터 및 flutter inspecotr : 에뮬레이터 시작 도구 및 Flutter 앱의 위젯 속성과 계층 구조을 보여줍니다.
2. 프로젝트 구조
- 프로젝트 구조는 생각보다 단순하게 되어 있으며 개발을 진행하면서 기본 프로젝트 구조에서 크게 벗어날 일은 없습니다. 처음에는 lib폴더와 pubspec.yaml파일을 주로 사용하게 되므로 해당 부분만 잘 숙지해 주시면 되겠습니다.
- .dart_tool
- Dart 패키지 매니저인 pub과 관련된 도구와 라이브러리가 위치하는 디렉터리입니다. - .idea
- IntelliJ IDEA 또는 Android Studio IDE에서 프로젝트를 개발할 때 사용되는 설정 파일들이 위치합니다. - android, ios, linux, macos, web, window
- 해당 플랫폼에서 동작하는 Flutter 앱을 빌드하고 패키징 하는데 필요한 프로젝트 관련 파일들이 위치합니다.
- 예를 들어 평소에 앱을 설치하여 실행하는 경우 사진첩, 주소록, 위치, 전화와 같은 접근이 필요하다고 메세지가 발행하는 경우가 있을 겁니다. 이와 같이 Flutter앱에서 해당 플랫폼에 접근하여 사진, 주소록, 위치과 같은 접근 권한이 필요한 경우에 각각의 플랫폼 별로 지정된 파일에 관련된 소스를 추가하는 작업이 필요합니다.
- 해당 폴더들은 Flutter 프로젝트 생성 시 Flatforms에서 선택된 항목들만 생성되므로 배포하지 않을 플랫폼은 제외해도 무방합니다. - lib
- Dart 코드 파일들이 위치하는 디렉터리입니다. 앱의 로직과 뷰를 구현하는 Dart 코드 파일들이 이곳에 위치하며, main.dart 파일이 앱의 시작점이 됩니다. (시작 dart파일은 언제든지 변경이 가능합니다.)
- 폴더도 생성이 가능하므로 사용과 기능에 따른 파일을 분류하여 관리가 필요합니다. - test
- 테스트 코드 파일들이 위치하는 디렉터리입니다. 앱의 기능을 테스트하는 Dart 코드 파일들이 이곳에 위치하며, flutter test 명령을 통해 실행할 수 있습니다.
- flutter에서는 핫 리로드(Hot reload) 기능으로 변경 사항이 즉각적으로 결과값이 나오므로 저 같은 경우는 아직까지 test 폴더의 활용성을 못 느끼고 있지만 언젠가는 사용될 순간이 올 것 같습니다. - pubspec.yam
- 프로젝트의 의존성 및 자산을 정의하는 파일입니다. 이 파일에는 사용되는 패키지들과 버전, 앱에서 사용되는 이미지, 폰트, 리소스 파일 등이 정의됩니다.
- 다양한 Flutter 패키지를 등록 후 pub get 명령을 사용하여 앱에서 필요한 패키지들을 다운로드할 수 있습니다
- main.dart 파일에 보시면 최상단에 "import 'package:flutter/material.dart';"가 import 되어있습니다. flutter에서 기본적으로 제공하는 위젯 및 기능입니다. material.dart에서 제공하지 않는 다양한 위젯 및 기능들이 패키지로 존재하는데 pubspec.yam 파일을 통해 설치가 가능하며 앱을 개발하면서 자주 사용하게 될 것입니다.
3. 기본 도구 및 기능 설명
- flutter 개발 진행 시 자주 사용하던 개발도구 및 기능에 대해 설명드리겠습니다. 이 외에도 개발자가 직접 툴바에 개발도구와 기능을 추가할 수 있으므로 참고하여 보시기 바랍니다.
1) 상단 바로가기 툴바
① 실행 및 디버깅할 장치(연결된 모바일, 가상에뮬레이터, 웹, desctop)를 선택합니다.
- 기본적으로 Chrome, Edge, Windws가 있으며 가상에뮬레이터 및 모바일을 연결하여 앱을 실행할 수 있습니다.
- 모바일에 특정된 기능이 아닌 간단한 화면이나 구조를 볼 때에는 Chrome, Edge이 간편하고 좋습니다.
② 시작점인 dart파일을 지정합니다.
- 기본적으로 main.dart가 선택되어 있습니다.
- Edit configurations을 선택하여 다른 dart 파일을 추가하여 시작점을 변경할 수 있습니다. 저 같은 경우에는 main.dart파일에 간단하게 연습한 소스를 매번 신규프로젝트로 생성하지 않고 main1_test명, main2_test명과 같이 등록하여 하나의 프로젝트에 저장하여 관리했습니다. 이렇게 하면 기존에 했던 내역을 간편하게 찾을 수 있으며 Edit configurations에 등록하여 시작점만 변경하여 실행하여 간단하게 실행이 가능하기도 합니다.
- 아래는 시작점인 main.dart을 변경하는 방법입니다.
③ 'Run', 'Debug' 실행
- Run : 프로젝트가 빌드되고 선택된 디바이스나 에뮬레이터로 앱이 설치 및 실행됩니다.
- Debug : Run과 동일하게 실행되지만 프로젝트 중간에 중단점을 설정하여 앱 실행 중 변수 값을 확인하거나 변경할 수 있습니다. 또한 앱 실행 중 발생한 오류를 추적하는데 사용됩니다. Flutter에서는 핫로드 기능이 있으므로 매번 디버깅 모드로 실행하지 않아도 되므로 상황에 따라 적절하게 조합하여 사용하시면 보다 편리하게 개발이 가능합니다.
2) 우측 바로가기 툴바
- Flutter Inspector : Flutter 앱의 위젯 속성과 계층 구조를 시각적으로 확인할 수 있는 도구입니다.
- Flutter Outline : 위젯 트리의 계층 구조를 시각적으로 보여주는 도구입니다.
- Emulator : Android 에뮬레이터를 실행하는 도구입니다.
3) 하단 바로기가 툴바
- Debug : 앱을 디버깅할 때 사용되는 콘솔 창을 엽니다.
- Terminal : Flutter 명령어를 통해 앱을 빌드하고 실행하고 패키지를 설치하는 등 사용이 가능합니다. 다만 이런 기능들은 안드로이드 스튜디오에서 그래픽 인터페이스로 도구들로 모두 제공되므로 취향에 따라 사용하시면 되겠습니다.
저 같은 경우는 Terminal에 'flutter pub get'정도의 명령어만 사용하다가 이마저도 pubspec.yaml 화면의 'pub get'버튼을 클릭해서 사용합니다.
4. 마무리
- 기본적인 안드로이드 스튜디오 툴과 Flutter 프로젝트 구조에 대해 익숙하지 않은 입문자분들에게 조금이나마 도움이 되고자 작성을 했는데요. 실제로는 한두 번 테스트 소스를 진행하다 보면은 무리 없이 익숙해지는것 같습니다.