flutter - 위젯(Stateless Widget, Stateful Widget, Flutter Widget Tree)

[위젯]

-> 위젯이란 독립적으로 실행되는 작은 프로그램

 

-> 플러터에서 위젯이란 UI를 만들고 구성하는 모든 기본 단위 요소

 

-> 화면 속의 이미지, 텍스트, 아이콘, 텍스트 필드, 버튼 등등을 모두 플러터에서는 위젯이라고 한다.

 

 

 

-> 또한 눈에 보이지 않는(center, padding column 등) UI 디자인 관련해서 레이아웃을 돕는 요소들 까지도 위젯이라고 한다.

 

레이아웃을 정의하는 모든 요소들도 위젯이라고 한다.

 

 

 

-> 이러한 작은 요소요소가 모여 만들어진 앱 그자체도 위젯이다.

 

 

(플러터는 비쥬얼 에디터가 없지만 코트를 ctrl + s 로 저장했을때 바로 에뮬레이터에 적용되는 것에 많이 놀랐다.)

 

 

 

[Types of Widgets]

-> 1. Stateless Widget

 

-> 2. Stateful Widget

 

-> 3. Inherited Widget

 

Stateless Widget 과 Stateful Widget을 먼저 설명한다.

 

[Stateless VS Stateful]

[stateless]

이전 상호작용이 어떠한 값도 저장하지 않는다는 의미

 

-> 동적인 위젯

-> 플러터 내에서 움직임이나 변화가 생기는 위젯

-> 위젯은 어떠한 실시간 데이터도 저장 하지 않는다.

-> 무언가 변화시키는 values 값을 가지지 않음

 

 

[stateful]

입력되는 밸류 값에 의한 상호작용이 상태를 지속적으로 추적하고 보존한다는 의미

 

-> 상태가 없는 정적인 위젯

-> 플러터 내에서 움직임이나 변화가 없는 위젯

 

-> 사용자의 상효작용에 의해서 모양이나 형태가 바뀐다.

(예: 사용자가 클릭했을 때 변화하는 오디오 버튼이나 체크박스 버튼들이 stateful 위젯)

 

-> 데이터를 받게 되었을 때에도 형태가 변화한다.

(예: 사용자가 입력했을때마다 변화하는 텍스트 필드)

 

 

 

 

[Flutter Widget Tree]

-> 플러터는 모든 것이 위젯으로 구성되어 있다.

 

-> 이러한 위젯들은 트리구조로 정리될 수 있다.

 

-> 한 위젯 내에서 여러개의 다른 위젯들이 포함될 수 있다.

 

-> 위젯은 부모 위젯과 자식 위젯으로 구성

 

-> Parent Widget을 widget container 라고 부르기로 한다.

 

 

[MyApp]

-> 앱의 루트 위젯이자 앱의 시작점

 

-> 꼭 이름이 MyApp일 필요는 없다.

 

-> 트리의 두번째 위치에는 MyApp에서 빌드된 MaterialApp이 있다.

 

 

 

[MaterialApp]

-> 실질적으로 MaterialApp위젯이 전체 앱을 감싸고 있는 위젯이다.

 

-> MaterialApp에서 플러터 sdk가 제공하는 위젯이 라고 이름붙여진 모든 것들을 사용할 수 있게 된다.

 

-> 3번째로는 MyHomePage 위젯이 있다.

 

 

 

 

 

 

[MyHomePage]

-> 이 또한 커스텀 위젯이고 이름이 반드시 MyHomePage 일 필요는 없다.

 

-> 여기서부터 본격적으로 앱의 디자인과 기능들이 만들어 진다.

 

-> 4번째 위치에는 scaffold 위젯이 있다.

 

 

 

 

 

 

 

[scaffold]

 

-> 아주 중요한 위젯이다.

 

-> 화면과 기능을 구성하기 위한 빈페이지를 준비해주는 위젯

 

-> scaffold 밑으로 본격적으로 UI와 관련해서 보여지는 모든 앱의 구성 요소들 (이미지 버튼 텍스트 또는 눈에 보이지는 않지만 센터 나 컬럼)이 사용된다.

-> 5번째 위치에는 AppBar 위젯이 위치한다.

 

 

[AppBar]

-> scaffold 위젯이 생성 되었기 때문에 이제부터는  앱 화면의 가장 상단에 위치하는  AppBar부터 디자인이 가능

 

 

 

 

 

 

-> 6번째 위치에는 AppBar의 구성 요소중 하나인 text 위젯이 위치한다.

 

 

 

 

 

 

 

 

-> 여기부터는 AppBar 밑으로 page의 바디 부분에 해당하는 부분이 오게 된다.

 

 

-> 눈에 보이는 위젯은 아니지만 모든 구성 요소들을 화면의 중앙에 위치 시키기 위한 ceter 위젯이 7번째로 오게 되고,

 

이 밑으로 요소들을 세로로 위치 시키기 위한 column 위젯이 8번째로 오게 된다.