2-1. Flutter 프로젝트 기본 구조

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다.

 

 

 

플러터 프로젝트의 구성을 살펴보자!

 

1. 플러터 프로젝트 폴더의 구성

 

왼쪽에 프로젝트 탐색 창을 보면 다음과 같습니다.

lib 폴더에는 플러터 앱의 소스가 작성된 main.dart 파일이 있다.

그리고 android와 ios 폴더에는 각 운영체제에서 프로젝트를 시작할 때 필요한 파일이 있다.

test 폴더에는 다트 코드로 함수를 테스트할 때 사용하는 파일이 있다.

 

 

2. 플러터 메인 소스 파일 구성

프로젝트 구성에서 lib 폴더에 main.dart 파일은 플러터 프로젝트를 만들면 자동으로 생성된다.

다트 앱을 실행하면 이 파일 안에 있는 main() 함수부터 시작한다.

 

위 코드에서는 material.dart 패키지를 불러왔다. 이 패키지에는 플러터의 UI와 관련된 거의 모든 클래스가 포함되어있다.

 

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

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

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

 

 

다음 코드는 main() 함수에서 runApp() 함수로 플러터 앱을 실행할 때 화면에 표시할 위젯으로 전달한 MyApp 클래스를 정의한 부분이다.

클래스 이름 뒤의 extends는 다트에서 상속을 의미하는 키워드이다.

위 코드에서는 StatelessWidget이라는 클래스를 상송받아 상태가 변경되지 않는 위젯을 상속받았다.

 

MyApp 클래스에서는 @override 애너테이션을 이용해서 build()라는 함수를 재정의했다.

build() 함수에서는 어떠한 위젯을 만들 것인지를 정의한다.

 

runApp() 을 이용해 클래스를 실행할 때는 MaterialApp() 함수를 반환해야 한다.

MaterialApp() 함수에는 title, theme, home 등이 정의되어있다.

title에 앱 이름을 정하고 theme에는 앱의 테마를 정한다.

visualDensity 속성은 어플이 모바일, 웹, 데스크톱, 맥 등 어떤 플랫폼에서도 자연스럽게 보이도록 지원한다.

home에는 어플을 실행할 때 첫 화면에 어떤 내용을 표시할지 정한다.

 

 

3. 상태 연결에 따른 위젯 구분

 

플러터 앱을 구성하는 위젯은 stateless 와 statefull 두 가지로 구분된다.

이 두가지는 상태 연결과 관련이 있다.

 

상태를 연결할 필요가 없는 위젯을 stateless widget 이라고 하며 StatelessWidget 클래스를 상속받아 만든다.

상태를 연결할 필요가 없다는 말은 앱이 위젯의 상태를 감시하지 않아도 된다는 말이다.

정적인 화면(내용이 갱신되지 않는 화면)을 보여줄 때는 앱이 위젯의 상태를 감시하지 않아도 된다.

 

상태가 연결된 동적인 위젯을 statefull widget 이라고 하며 StateFullWidget 클래스를 상속받아 만든다.

내용을 갱신해야할 때 즉, 앱이 위젯의 상태를 감시하다가 위젯이 특정 상태가 되면 알맞은 처리를 해야할 때 사용한다.

 

당연히 statefull widget이 자원을 더 많이 사용한다.