Widget 이란?

<강좌 내용>

1. Flutter 상에서의 위젯이란?

2. Stateless widgets vs. Stateful widgets

3. Widget tree

👉Widget이란?

1. 독립적으로 실행되는 작은 프로그램

2. 주로, 바탕화면 등 에서 날시나 뉴스, 생활정보 등을 보여준다.

3. 그래픽이나 데이터 요소를 처리하는 함수를 가지고 있다.

👉What is Widget in flutter?

❓ flutter 상에서 위젯이란?

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

안드로이드를 예시로 들면, xml 파일에 해당하는 것이라 할 수 있다.

2. 눈에 보이지 않는 요소들까지 위젯

이미지, 텍스트에디트, 버튼을 눈에 보이는 요소들을 말 한다.
❓ 그 외에, 눈에 보이지 않는 위젯에는 무엇이 있을까?
요소들을 정 중앙에 위치시키기 위한 기능을 담당하고 있는 center
요소들을 세로로 배치시키기 위한 column
이미지의 위치를 세세하게 지정해주는 padding

3. Everything is a widget

안드로이드의 visual editor가 없는 것이 불편할 수 있다.
flutter에서는 코드로 ui를 조작한다.

👉Types of Widgets

1. Stateless Widget

2. Stateful Widget

3. Inherited Widget

👉Stateless와 Stateful의 일반적인 의미

1. Stateful => Value 값을 지속적으로 추적 및 보존

2. Stateless => 이전 상호작용의 어떠한 값도 저장하지 않음

👉Types of Widgets

1. Stateless Widgets : 상태가 없는 정적인 위젯. flutter 내에서 Stateless는 어떤 움직임이나, 변화가 없음

2. Stateful Widgets : 계속 움직임이나 변화가 없는 위젯

👉Stateless Widget

1. 스크린 상에 존재만 할 뿐, 아무것도 하지 않음

2. 어떠한 실식나 데이터도 저장하지 않는다

3. 어떠한 변화(모양, 상태)를 유발시키는 value 값을 가지지 않음

👉Stateful Widgets

1. 사용자의 interaction에 따라서 모양이 바뀐다. EX) 체크 박스, 라디오 버튼

2. 데이터를 받게 되었을 때 모양이 바뀐다. EX) 에디트 텍스트

👉Flutter Widget tree

1. Widget들은 tree 구조로 정리될 수 있음

2. 한 Widget 내에 얼마든지 다른 widget들이 포함될 수 있음

3. Widget은 부모 위젯과 자식 위젯으로 구성

4. Parent widget을 widget container라고 부르기도 함

MyApp(이름 변경 가능. 앱의 루트 위젯이자, 앱의 시작점)

MaterialApp(Flutter SDK에서 제공하는 Widget 이라고 이름붙여진 모든 것 들을 사용할 수 있게 한다.)

MyHomePage(이름 변경 가능. Custom Widget. 본격적으로 앱의 디자인과 기능들이 만들어짐)

Scaffold(아주 중요한 위젯. 빈 페이지를 준비해주는 위젯. 하위에 모든 구성 요소들 - 이미지, 버튼, 텍스트들 center colunm 등-이 들어간다.)

AppBar (가장 상단의 앱바)

Text (앱의 이름, 화면 이름 등의 텍스트를 입력)

Center

Column - Image, TextField, Button