[Flutter] 2. 플러터의 위젯 & MaterialApp, Scaffold, AppBar 위젯

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로

저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다.

* 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다.

* 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :)

---

이번 포스팅부터는 플러터에 대해 근본적인 부분부터 공부해보고자 합니다.

그 시작으로 '위젯'에 대해 공부한 내용을 정리하고자 합니다.

원본 문서는 아래와 같습니다.

https://flutter.dev/docs/development/ui/widgets-intro

Introduction to widgets

---

플러터의 위젯은 React로부터 영감을 얻은 모던 프레임워크를 사용하여 만들어집니다.

핵심 아이디어는 위젯으로 UI를 만드는 겁니다.

위젯은 주어진 현재 속성과 상태 정보를 어떻게 보여주어야 할 지 설명합니다.

위젯의 상태가 변하면 현재 속성과 상태정보를 토대로 위젯을 다시 빌드합니다.

이때, 화면에 보여주는 상태를 변경하기 위해 '렌더 트리'가 필요로 하는 최소한의 변화를 알아내기 위해

프레임워크가 이전의 상태 정보와 현재의 상태정보를 비교합니다.

(렌더 트리는 실제 화면에 존재하는 위젯에 대한 트리입니다.)

 

플러터 프로젝트를 맨 처음 시작하면 나오는 코드도 사실 제일 기본수준의 코드는 아닙니다.

제일 간단한 코드는 다음과 같습니다.

 

C언어나 자바와 유사하게 main()은 프로그램의 시작점입니다.

runApp() 함수는 위젯을 인자로 받아, 그 위젯을 위젯 트리의 루트로 만듭니다.

 

runApp() 함수의 인자로 Center() 위젯이 들어가 있으니 Center위젯이 루트 위젯이겠네요.

그리고 Center 위젯은 자식(child)위젯으로 Text()위젯을 갖고 있습니다.

 

위젯트리는 코드상 작성한 위젯의 트리입니다.

위 코드의 위젯트리를 그림으로 나타내면 다음과 같습니다.

방금 작성한 코드를 실행해보면 다음과 같이 나옵니다.

 

검은색 배경화면의 한 가운데에 하얀색 글자로 Hello, world! 가 있습니다.

플러터 프레임워크는 루트위젯이 화면 전체를 덮도록 만듭니다.

따라서 저 검은색 배경화면은 'Center()' 위젯입니다.

 

Center 위젯은 자신의 자식 위젯을 화면의 가운데에 배치하는 위젯이므로

문자열을 보여주는 Text()위젯이 결과적으로 화면 가운데에 위치하게 됩니다.

 

이 예제에서 textDirection 속성이 반드시 구체화 되어야 합니다.

구현하지 않으면 아래와 같은 오류화면이 나옵니다.

 

에러 내용이 굉장히 친절합니다.

RichText 위젯은 Directionality위젯을 상위 위젯으로 가져야 하는데, Directionality 위젯이 발견되지 않았다.

Directionality 위젯이 있어야 할 자리에 발견한 위젯은 RichText위젯이라고 하며 위젯트리도 보여주네요.

 

보통 Directionality 위젯은 루트위젯으로 존재하는 MeterialApp() 위젯이나 WidgetsApp() 위젯에서 알아서 관리합니다.

이 속성이 없으면 텍스트의 읽는 방향, 방향성을 가진 속성(start, end)이나 위젯들을 처리할 수 없어 문제가 됩니다.

 

textDirection 속성은 말 그대로, 문자열의 방향을 지정하는 속성입니다.

ltr은 Left To Right 의 줄임말입니다.

즉, 왼쪽에서 오른쪽 순서로 문자열을 표기, 이해, 처리하라는 의미겠네요.

 

* 또한 현재로서 이유는 알 수 없지만, 위 예제에서는 hot reload 기능을 사용할 수 없었습니다.

대신 프로그램 자체를 재실행해서 hot restart를 해야 했습니다.

 

 

보통은 앱을 작성할 때, 어떤 상태로 앱을 관리하느냐에 따라

새 위젯은 StatelessWidget 이나 StatefulWidget의 서브클래스로 작성합니다.

또한 각 위젯의 주요 기능은 build() 메소드의 구현입니다.

이 메소드는 다른 자신의 하위 단계의 위젯에 대해 설명하는 메소드입니다.

프레임워크는 위젯의 모양과 위치를 계산하고 설명하는 RenderObject부터 시작해서

맨 아래의 자식 위젯까지 위젯트리를 따라 차례대로 위젯들을 빌드합니다.

---

다음으로 MaterialApp() 위젯과 Scaffold() 위젯, AppBar() 위젯에 대해 보겠습니다.

 

플러터는 Material 디자인을 갖는 앱을 만들기 쉽게 많은 위젯들을 제공합니다.

Material 앱은 MaterialApp() 위젯으로 시작합니다.

이 위젯은 Navigator와 같은 유용한 위젯들을 앱의 시작단계에서 빌드합니다.

Navigator는 '경로(라우트, route)'라는 문자열에 의해 정의된 위젯 스택을 관리하는 위젯으로

화면을 부드럽게 전환할 수 있게 해줍니다.

(그래서 이전포스팅에서 화면을 전환할 때, MaterialApp() 위젯의 Navigator를 가져다가 쓸 수 있었던 것입니다)

또한 MaterialApp() 위젯을 사용해야 Material 디자인 아이콘을 사용할 때 문제없이 사용할 수 있습니다.

 

Scaffold() 위젯은 앱바, 중앙스크린, 바텀네비게이션 등의 구조가 미리 정의된 위젯입니다.

따라서 이 위젯의 각각의 속성으로 적절한 위젯을 넘겨주면, 해당 위젯들이 알아서 적절하게 배치됩니다.

 

유사하게 AppBar() 위젯은 Scaffold() 위젯의 appBar 속성에 자주 사용하는 위젯입니다.

leading 속성으로 타이틀 이전에 나오는 버튼이나 아이콘을,

title 속성으로 앱 타이틀을

actions 속성으로 앱바 우측 상단의 부가 기능 버튼/아이콘들을 배치할 수 있으며,

단순히 각각의 속성에 위젯들만 넘겨주면 알아서 배치합니다.

 

Scaffold위젯과 AppBar 위젯을 굳이 사용하지 않더라도 직접 구현하여 앱을 만드는 것은 가능하지만,

이 위젯들을 사용하면 세부적인 사항들을 신경쓰지 않고 편하게 앱을 만들 수 있다는 장점이 있습니다.

하지만 매우 구체적이고 세세하게 커스텀이 안된다는 것은 단점이 될 수 있겠네요.