[Flutter] 플러터에서의 위젯이란?

 

플러터에서의 위젯이 무엇이길래, 

대표 홈페이지에 접속했을 때 "Building your first Flutter widget"으로 보일 수 있을까?

일반적으로 표현을 Application으로 하지않을까?라는 의문이 들기 시작했으며,

플러터 관련 콘텐츠를 보면 나오는 "위젯"이라는 단어가 무엇인지 정리하는 포스팅으로 정의한다.

---

위젯(Widget)이란?

나에게 있어서 위젯이란 단어는 모바일 어플리케이션에서 홈 화면에 띄워둘 수 있는 무언가로 인식하고 있었다.

플러터에 있어서도 위젯이 그런것인가로 생각했으나,

 

그것과 다르게 플러터는 모든게 위젯이다.

 

대체 이말이 무엇이냐 하면

- 화면에 표시되는 UI를 위젯이란 개념을 사용하여 나타낸다. (이미지, 텍스트, 버튼 등)

- 눈에보이지 않는 요소 레이아웃과 같은 것도 역시도 위젯으로 표현된다. (Padding, Center 등)

 

이렇기에 플러터에 있는 모든 요소 하나하나가 "위젯"이고,

해당 위젯들을 통해서 플러터 앱이 만들어지기에 플러터로 만들어진 애플리케이션을 위젯으로 표현하는 것 같다.

 

 

위젯의 종류

플러터내에는 3가지 위젯으로 구분 지어진다.

Stateless Widget / Stateful Widge / Inherited Widget

Stateless Widget

이름에서 보이는 것처럼 "상태가 없는 위젯"이다.

(모든 위젯에서는 상태가 존재하나, 특정 상황에 상태가 변화지 않는 것을 의미한다.)

화면상에는 존재 하나 실시간 데이터를 저장하지 않는 상태변화가 없는 정적인 데이터를 표현할 때 사용한다.

 

Stateful Widget

이름에서 보이는 것처럼 "상태를 가진 위젯"이다.

화면에서 사용자의 행동 혹은 데이터에 따라 모양 및 값이 바뀌는 동적인 데이터를 표현할 때 사용한다.

 

https://flutter.github.io/samples/form_app.html

위에서 말한 Stateless Widget과 Stateful Widget을 요소로 찾아본다라면

빨간색 박스로 되어있는 영역이 Statelss Widget,

파란색 박스로 되어있는 영역이 Stateful Widget로 구분 지을 수 있습니다.

 

Inherited Widget

이름에서 보이는 것처럼 "상속된 위젯"이다.

위에서 말한 것처럼 플러터는 위젯들을 이용하여 애플리케이션이 만들어지기에,

하나의 위젯 안에 여러 개의 위젯, 더 나아가 하위 뎁스로 계속 위젯을 만들 수 있게 된다. (이것을 위젯 트리라고 부른다.)

 

깊이가 깊어질수록 상위 위젯을 호출하기가 어렵고,

최하위 위젯에서 최상위 위젯의 데이터가 필요하다라면, 최하위 위젯에서 한 단계씩 위로 가는 것은 굉장히 번거로울 것입니다.

 

이럴 때를 위해서 만들어진 것인 "Inherited Widget"입니다.

가장 최상단 위젯을 Inherited Widget르로 만들어두면, 자식 위젯들은 어디서든지 바로 접근할 수 있게 됩니다.

 

위젯트리 (Widget Tree)

위의 Inherited Widget에서 잠깐 설명한 바, 

플러터에서는 모든 것이 위젯으로 구성되어있기에, 계층구조 나뉘며 tree 구조로 표현할 수 있습니다.

이에 따라 Widget은 부모 위젯과 자식 위젯으로 구성됩니다.

https://www.didierboelens.com/2018/06/widget-state-context-inheritedwidget/

• MyApp : 앱의 루트 위젯이자, 앱의 시작점. 일종의 커스텀 위젯으로 이름이 MyApp이 아니어도 상관없음 MaterialApp이 빌드됨
• MaterialApp : 실질적인 전체 앱을 감싸는 위젯으로 볼 수 있음.
• MyHomePage : 커스텀 위젯으로 이름이 MyHomePage가 아니어도 상관없음. 앱의 디자인과 기능이 만들어짐
• Scaffold : 중요한 위젯으로 앱 화면과 기능을 구성하기 위한 빈 페이지를 준비해주는 위젯, 해당 위젯 하위로 앱의 UI를 표현할 수 있는 위젯들이 사용됨
• AppBar : 앱 화면의 상단을 표현.
• Center : Child Widget을 Parrent Widget 정 중앙에 위치시키기 위해 사용함. (만약 위치를 정중앙이 아닌 다양한 위치에 배치하기 위치하긴 위해서는 Align을 사용함)
• Column: 세로로 정렬해주는 역할을 함 (그 반대의 Row가 존재함)

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

Widget catalog

이와 같이 플러터 내의 UI를 표현하기 위한 다양한 위젯이 존재하며,

상황과 이벤트에 맞게 플러터의 위젯을 설정하는 게 바람직해 보인다.

(생각한 것보다 뭔가 잘 알아야 원하는 형태로 만들 수 있을 것 같다)