플러터(Flutter) 반드시 해주는 초기 설정 · 프로젝트 구조 파악하기

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 프레임워크로, iOS, Android, 웹, 데스크톱 애플리케이션을 개발하는데 사용된다. 이전 글을 통하여, 플러터를 설치하고 데모 애플리케이션을 가볍게 실행해보는 일을 진행하였다. 플러터의 초기 설정 과정은 간단하며, 프로젝트 구조를 파악하는 것으로도 빠르게 앱 개발에 착수할 수 있다. 이 글에서는 플러터의 기본 설정과 프로젝트 구조를 자세히 설명하는 내용을 담고 있다.

 

Flutter 디렉터리

사진 폴더에는 사진을 넣고, 문서에는 문서가 들어가듯, 플러터 프로젝트의 디렉터리도 마찬가지이다. 경로마다 주어진 역할이 있고, 그것을 해치지 않을 때 체계적이고 효율적인 프로그래밍이 가능해진다.

 

 

프로젝트를 생성하기만 해도, 기본적으로 생성되는 디렉터리가 매우 많다. 아래는 가장 핵심적이고 많이 사용할 여섯 가지의 디렉터리/파일에 대한 설명이다.

 

① android

안드로이드 플랫폼에 대한 네이티브 코드가 들어 있는 폴더이다. 안드로이드 앱의 설정 및 기능들을 정의하는데 사용된다. 폴더 내에는 build.gradle 파일이 포함되며, 프로젝트 설정, 빌드 종속성 관리, 키 등을 포함한다.

 

② build

최초 프로젝트 생성 시에는 없으나 빌드 작업을 수행한 후 생성되는 디렉터리이다. 빌드 도구에 의해 생성된 컴파일된 파일, 중간 빌드 결과, 앱의 실행 가능한 파일 등이 포함될 수 있다.

 

③ ios

android와 마찬가지로, iOS 플랫폼에 대한 네이티브 코드가 들어 있는 폴더이다. iOS 앱의 설정 및 기능들을 정의하는데 사용된다.

 

④ lib

플러터 앱의 소스 코드가 들어 있는 가장 중요한 폴더이다. 개발자가 직접 작성하게 될 앱의 주요 로직이나 UI 구성 요소들이 이 디렉터리 내부에 담긴다. 대표적으로 main.dart 파일이 프로젝트 생성 시 같이 생성된다.

 

⑤ analysis_options.yaml

코드를 실행하지 않고도 코드를 검사하여 잠재적인 오류를 찾고 코드 품질을 향상시키는 작업을 실행한다. 작성중인 소스코드에 제안 사항이 있어 노란색 밑줄이 그어지는 것(Linter)과 관련이 있다.

 

⑥ pubspec.yaml

앱에서 사용하는 라이브러리, 리소스 및 설정을 정의하는 파일이다. 앱에서 사용하는 패키지, 앱의 이름, 버전 등을 명시한다. 외부 라이브러리를 앱에 적용해야 한다면, 반드시 pubspec의 디펜던시 부분에 이를 명시하는 작업을 거친다.

 

요약하자면, 코드 작성은 lib에서 하고, 라이브러리는 pubspec을 필요로 한다는 점이 가장 중요하다.

 

 

프로젝트 생성 후 초기 설정

아래는 프로젝트 초기 실행 시 해주면 좋은 설정들을 포함한다.

 

 

analysis_options.yaml에 rules 추가하기

루트 디렉터리에 있는 analysis_options.yaml 파일 속 rules 아래에 다섯 줄을 추가한다.

모두 Linter의 규칙을 수정하는 데 쓰이는 설정값으로, const/type/print 등에 (프로덕션이 아닐 때) 불필요한 노란색 밑줄이 그이는 것을 제거하는 역할을 해준다.

 

///analysis_options.yaml
  ///rules:
    prefer_typing_uninitialized_variables : false
    prefer_const_constructors_in_immutables : false
    prefer_const_constructors : false
    avoid_print : false
    prefer_const_literals_to_create_immutables : false

반드시 rules: 이하에 작성하여야 하며, analysis_options.yaml을 포함한 모든 yaml 파일은 반드시 들여쓰기(띄어쓰기 네 칸)를 해야 하는 규칙이 있으므로 여백에 주의해야 한다.

 

 

사진 넣을 assets 디렉터리 추가

애플리케이션을 개발하다 보면 대부분의 경우 이미지를 포함하게 될 것이다. 물론 아직은 이미지를 다룬 적이 없지만, 사전에 설정해두는 것 만으로도 필요할 때 나중에 이미지를 삽입하는 것이 한 결 편해진다.

 

디렉터리 창의 빈 곳을 눌러 New > Directory를 클릭한다.

assets 또는 images 등, 원하는 디렉터리 이름을 입력 후 Enter로 생성한다. 여기서는 assets로 진행하였다.

assets 디렉터리가 성공적으로 생성되었다.

 

pubspec.yaml에 들어가 flutter: 아래에 디렉터리 이름을 추가한다.

 

///flutter:
   assets:
    - assets/ (또는 다른 디렉터리명)

 

여기까지 했다면 초기 설정은 모두 끝났다.

 

 

 

마치기

다음 글은 dart 언어의 문법과 구조에 대해 작성할 예정이다.