Flutter의 구조

플러터의 폴더 및 파일 구성

폴  더	내  용	비  고
android	안드로이드 프로젝트 관련 파일	안드로이드 스튜디오로 실행 가능
ios	iOS 프로젝트 관련 파일	엑스코드로 실행 가능(맥 전용)
lib	플러터 앱 개발을 위한 다트 파일	플러터 SDK 설치 필요
test	플러터 앱 개발 중 테스트 파일	테스트 편의성 제공

* test - 일반적으로 함수를 테스트하려면 앱을 다시 실행해야 해서 시간이 걸리는데, 플러터 프로젝트는 test 폴더를 제공함으로써 편리하게 테스트할 수 있음

 

파  일	내  용	비  고
pubspec.yaml	패키지, 이미지, 폰트 설정	직접 관리
README.md	프로젝트 소개
.gitignore	깃에 커밋, 푸시 등 소스 코드를 업로드할 때 필요 없는 파일 기록
.metadata	Flutter SDK 정보	자동 관리
.packages	Flutter SDK에 사용하는 기본 패키지 경로
first_flutter_app.iml	파일이 자동으로 생성될 때 만들어지는 폴더 위치
pubspec.lock	pubspec.yaml 파일에 적용된 패키지 위치

---

플러터 메인 소스 파일 구성

 

* import 구문

import는 해당 소스 파일에서 사용하려는 패키지를 불러올 때 사용하는 구문이다.

다른 다트 클래스나 pubspec.yaml 파일에서 내려받은 패키지를 불러올 때도 사용한다.

import 구문

* main() 함수 

플러터 앱은 자바나 C 언어로 작성된 프로그램처럼 main()함수에서 시작한다. 

main() 함수에서는 runApp()함수를 호출한다.

runApp()함수는 binding.dart 클래스에 정의되어 있으며 플러터 앱을 시작하는 역할을 한다.

이 함수에 플러터 앱을 시작하면서 화면에 표시할 위젯을 전달한다. 

- 위젯이란? 특정한 기능을 담당하면서 앱을 편리하고 아름답게 만드는 부품이라 생각할 수 있다. 위젯은 클래스로 구현하며 이를 상속받는 다양한 위젯이 있다. ex) Text, Image, Button...

 

* MyApp 클래스

MyApp 및 초기화면

• extends - 다트에서 상속을 의미하는 키워드 
• *StatelessWidget - 클래스 상속을 받았는데 상태가 변경되지 않는 위젯을 상속
• @override - 애너테이션, build()라는 함수를 재정의
• build() - 어떠한 위젯을 만들 것인지 정의
• MaterialApp - 그림을 그리는 데 필요한 도화지라고 생각
• visualDensity - 앱이 모바일이나 웹, 데스트콥 등 어떤 플랫폼에서도 자연스럽게 보이도록 지원
• home - 앱이 실행할 때 첫 화면에 어떤 내용을 표시할지 정함

* StatelessWidget & StatefullWidget

플러터 앱을 구성하는 위젯은 스테이트리스와 스테이트풀 두가지로 구분할 수 있습니다. 

이러한 구분은 상태 연결에 따라 나뉩니다.

 

StatelessWidget

- 내용을 갱신할 필요가 없는 위젯은 화면에 보이기 전에 모든 로딩을 마칩니다. 

예를 들어 앱 실행시 사용자에게 정적인 도움말을 보여준다면 도움말 페이지는 갱신할 필요가 없습니다. 

즉, 앱이 위젯의 상태를 감시하고 있을 필요가 없습니다.

이처럼 상태 연결할 필요가 없는 정적인 위젯을 스테이트리스 위젯이라 하며 StatelessWidget 클래스를 상속받아 만든다. 

 

StatefullWidget

- 위와 반면에 내용을 갱신해야 될 때가 있습니다.

예를 들어 계산기 앱을 사용한다면 버튼을 누를 때마다 화면에 누른 숫자가 반영되어야 합니다.

즉, 앱이 위젯의 상태를 감시하다가 특정 상태가 되면 알맞는 처리를 수행해야합니다.

이처럼 상태가 연결된 동적인 위젯을 스테이트풀 위젯이라 하며 StatefullWidget 클래스를 상속받아서 만든다.