Flutter) Widget이란?

Widget?

나는 위젯을 처음 들었을 때 드는 생각은 평상시 안드로이드기반 핸드폰이나 아이폰을 사용할 때 각종 위젯들을 사용해 캘린터나 날씨 등의 위젯을 상상했다. 

 

네이버 사전 기준으로 위젯의 의미는 PC, 휴대폰, 블로그·카페 등에서 웹브라우저를 통하지 않고 날씨·달력·계산기 등의 기능과 뉴스·게임·주식정보 등을 바로 이용할 수 있도록 만든 미니 응용프로그램이다. 위젯(widget)의 사전적 의미는 ‘소형 장치’ 또는 ‘부품’이다. 이러한 의미들이 있는데 그렇다면 플러터에서 위젯이란 무엇일까?

 

1. UI를 구성하는 모든 기본 단위요소

위와 같은 정의는 네이티브 안드로이드 개발을 할때 View라고 생각하면 편할것 같았다.

 

2. 눈에 보이지 않는 요소(padding, center 등)

네이티브 안드로이드 에서는 뷰를 정의할때 내부 속성값으로 margin이나 padding 등을 정의해서 뷰의 크기나 위치등을 지정하는데 이는 그저 단순 속성값일 뿐 뷰라고 칭하지는 않는다 하지만 플러터에서는 이러한 부분까지 위젯이라고 한다.

 

결국 이러한 위젯들을 쌓고 쌓아 만들어진 화면 자체도 위젯이라고 할 수 있으며 모든게 위젯이라고 할 수 있다. 그렇다면 이 위젯의 종류는 어떤것이 있을까?

 

 

Widget의 종류?

1. Stateless Widget

직역하면 상태가 없는 위젯이라는 의미이다. 이는 화면상에 존재하지만 실시간 데이터를 저장하지 않고 어떠한 상태도 가지지 않음

예를 들면 화면에 어플의 로고가 띄워져 있는 경우 이는 클릭을 한다던가의 액션으로 상태를 변화시키지 않는 단순한 이미지 이다.

 

2. Stateful Widget

직역하면 상태를 가지는 위젯이라는 의미이다. 이는 사용자의 행동이나 데이터에 따라 모양이나 값이 바뀌는 위젯을 의미한다.

예를들면 체크박스를 사용자가 클릭하면 모양과 상태가 바뀐다. 네이티브 안드로이드에서 textview라고 하는 텍스트를 입력하는 위젯 또한 이 경우에 해당한다.

 

3. Inherited Widget

직역하면 상속된 위젯이라는 의미이다. 이는 말 그대로 위젯을 상속하는 것인데 데이터를 특정 위젯의 하층에 있는 모든 위젯에게 효율적으로 전달하는 플러터만의 특별한 위젯이다. 

 

 

Widget Tree?

이어서 생각해 볼것은 Widget Tree이다. 위젯들은 트리 구조로 정리가 되는데 이는 한 위젯 안에 다른 위젯이 포함되는 부모 자식 관계로 저장하는 것이다. 부모 위젯을 위젯 컨테이너라고도 얘기한다.

 

 이 위젯트리의 최 상위에는 나의 프로젝트 이름이 존재한다.(하단의 MyApp)

 

그 하위에 머테리얼 앱이 있고 이 위젯이 실직적으로 모든 위젯을 감싸고 있는 위젯이라고 할 수 있다. 또한 이 위젯을 통해 모든 플러터 위젯을 사용할 수 있다.

 

그 하위에 MyHomePage라는 위젯이 있는데 이것 또한 커스텀 위젯으로 이름이 반드시 MyHomePage일 필요는 없으며 여기에서 부터 본격적으로 앱의 디자인과 기능이 만들어진다.

 

그리고 Scaffold 위젯이 있는데 이 위젯이 앱의 디자인과 기능을 구현하기 위한 빈 페이지를 제공하는 위젯이라고 보면 된다. 이 위젯의 하위에 Text나 Button 등의 위젯이 들어간다.

 

그 하위에는 AppBar와 그 내부의 Text나 눈에 보이고 보이지 않는 모든 위젯이 포함된다. 그 중 Column 위젯은 위젯을 세로로 위치시키기 위한 위젯으로 네이티브 안드로이드 기준으로 리니어 레이아웃과 비슷한 위젯으로 생각된다.

 

 

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