Stateful, Stateless 위젯

위젯에는 크게 Stateless 와 Stateful 이 있다. (InheritedWidget은 생략)

 

간략히 말해 Stateless 는 마치 상수처럼 UI 모습 자체가 변화할 일 이 없는거고, Stateful 은 상황에 따라 UI에 

변경이 있는 위젯이다. (예 : 변수값을 화면에 표시)

 

Stateless 위젯은 크게 살펴 볼게 없다.

 

1. Stateless 위젯 생성

    - Widget build 함수를 오버라이딩 하여 UI를 구성한다.     -

class test extends StatelessWidget 
{
	const test({super.key});
    @override
    Widget build (BuildContext context)
    {
    	return ... 
    }
}

     - 부모 클래스인 StatelessWidget을 상속받고, super.key 를 받는 생성자를 만든다

     - 오버라이딩한 build 함수 인지값인 BuildContext 는 신경쓰지 말자. 이 내부에 실제 UI 위젯들을 배치하면 된다. 

     - key 나 context는 따로 신경 안써도 된다. 시스템에서 알아서 한다. 

 

 

2. Stateful 위젯

     -  클래스에 맞는 State 를 갖는다. 

     - State는 재활용이 가능하나 추천하지는 않는듯 하다

     - State 안에 똑같이 Widget build 함수를 통해 UI를 구성한다. 
     - UI 상태변화를 하기 위해서는 setState 함수를 호출해야 한다.

     - State 클래스에서 @override 를 통해 InitState 등 State 관련된 함수를 오버라이딩 할수있다  

class statefultest extends StatefulWidget {
	const statefultest({super.key});
    
    @override
    State<statefultest> createState() => _testState();
 }
 
 class _testState extends State<statefultest>
 {
 
 	String textval;
    
    void changeText(String txt)
    {
    	setState(() {
        	textval = txt
        });
    
    }
    
    @override Widget build(BuildContext context) {
    	return ......
    }
 
 }

 

아 참, private 설정이 다트에서는 이름 앞에 _ 를 붙이면 된다.  

3. 간단 정리
     - StatelessWidget 에서, 클릭했을때 무언가 UI의 변화를 주어야 한다면, 외부 클래스를 이용해야 한다. 
        ChangeNotifier 를 상속받는 클래스를 만들고, 해당 클래스를 context.watch<클래스명>(); 을 통해 연계해야한다. 

 

    - StatefulWidget 의 경우, 나와 매칭되는 State 에서 변수 추가라든지, 클릭시 작업해야 하는 것들을 코딩해 놓고, 
       UI를 변경 시킬 수 있다. 

즉, 클릭이든 뭐든 UI에 변경을 주어야 하는 상황에서, StatelessWidget 은 자체적으로 처리할 수 없고, 대리자가 필요하며,  StatefulWidget은 본인의 State를 통해 자체 처리할 수 있다.