Flutter : StatefulWidget & StatelessWidget

flutter-ko.dev/docs/development/ui/interactive

Adding interactivity to your Flutter app

 

Stateful and stateless Widgets

위젯은 stateful 하거나 stateless 하다.

• StatelessWidget 은 변경되지 않는 위젯으로 아래 위젯들은 StatelessWidget 의 하위 클래스이다.
  • Icon, IconButton, Text
• StatefulWidget 은 사용자 상호작용에의해 트리거되거나 데이터를 수신할 때 이벤트에 대한 응답으로 위젯이 변경될 수 있으며, 아래 위젯들은 StatefulWidget 의 하위 클래스이다.
  
  • Checkbox, Radio, Slider, InkWell, Form, TextField

위젯의 상태는 State 객체에 저장되어 위젯의 상태와 모양을 구분한다.
State 는 Slider 의 현재 값, Checkbox 의 checked 여부와 같이 변경할 수 있는 값으로 구성된다.
위젯의 상태가 변경되면 State 객체는 setState() 를 호출해서 프레임워크에게 위젯을 다시 그리게 한다.

What's the point?

• Stateful 위젯은 StatefulWidget 와 State 의 각 하위 클래스로 구현된다
• State 클래스는 위젯의 변경 가능한 상태와 위젯의 build() 메소드로 구성되어있다
• 위젯의 상태가 변경되면 State 객체는 setState() 를 호출해서 프레임워크에게 위젯을 다시 그리게 한다.

StatefulWidget 을 만드는 예제는 아래 링크를 참고!
flutter-ko.dev/docs/development/ui/interactive#creating-a-stateful-widget

 

Managing State

Stateful 위젯의 상태는 위젯 자체 또는 부모 위젯, 아니면 둘 다 등등 상황에 따라 다르며 일반적으로 다음과 같다.

• 위젯이 자체적으로!
• 부모가 위젯의 상태 관리
• 믹스 앤 매치로,,,?

Case1. 위젯 자체적으로 상태 관리
Checkbox 의 checked 여부 또는 Slider 의 위치같이 사용자 데이터인 경우, 부모 위젯에서 상태가 관리된다.
ex) flutter-ko.dev/docs/development/ui/interactive#the-widget-manages-its-own-state

Case2. 부모가 상태 관리
Stateless 위젯인 IconButton 은 탭 되었는지 여부의 상태를 자체적으로 관리하지 않는다.  이럴 경우 부모 위젯이 탭 여부 상태를 관리해야 한다.
아래 예제를 보면 부모 위젯은 Statefull 이고 버튼은 Stateless 위젯이다.
ex) flutter-ko.dev/docs/development/ui/interactive#the-parent-widget-manages-the-widgets-state

Case3. 믹스앤매치
어떤 버튼이 탭되면 녹색 테두리가 생긴다고 가정해보자.
이럴 경우 버튼은 자체적으로 탭 여부 상태를 갖고 있으며 부모에세 상태를 보내면 부모가 녹색 테두리 여부의 상태를 관리한다.
ex) flutter-ko.dev/docs/development/ui/interactive#a-mix-and-match-approach