플러터 state를 자식 위젯에서 쓰고 싶다면 3 step 이용

예를 들어 a라는 state를 MyApp 위젯에 만들어놨는데

그 안에 있는 DialogUI() 위젯이 a를 가져다가 Dialog 안에 표기해주고 싶으면

어떻게 코드를 짜야할까요? 

 

DialogUI() 위젯 안에다가 그냥 대충 a라고 쓰면 될까요?

안됩니다. 

원래 하나의 class안에 있는 변수는 당연히 다른 class에서 쉽게 사용이 불가능합니다.

그렇다면 

 

 

 

 

부모 위젯에 있던 state를 자식 위젯이 사용하고 싶으면

부모 위젯에서 자식 위젯으로 state를 전송해서 써야합니다.

 

 

 

 

 

 

 

부모 -> 자식 state 전송하는 법 

 

1. 보내기 

2. 자식은 state 이름을 등록

3. 자식은 사용  

이게 끝인데 MyApp()에 있던 a라는 state를 DialogUI() 안으로 전송해봅시다. 

 

 

(MyApp 안의 DialogUI() 쓰던 곳)
DialogUI( state : a ) 

1. 보내는건 자식쓰는 곳에다가 파라미터로 넣으면 보내기 끝입니다.

작명 : 변수명 

파라미터넣을 땐 이렇게합니다.

 

 

class DialogUI extends StatelessWidget {
  DialogUI({Key? key, this.state }) : super(key: key);
  final state;

2. 자식 위젯 정의부분에서 어떤 파라미터가 들어올 수 있다고 등록하면 됩니다. 

this.작명한거, final 작명한거 2개 채우면 등록 끝입니다. 

final은 var 이거랑 똑같은 문법인데 나중에 변경이 안되는 변수만들고 싶을 때 씁니다. 

싫으면 var 쓰십시오 

 

 

 

3. 이제 DialogUI() 안에서 자유롭게 쓰면 됩니다.

이제 자식 위젯은 부모에 있던 a라는 변수를 state라는 이름으로 쓸 수 있는 것임 

Text(state.toString()) 이런 식으로 테스트해보십시오 

 

(참고) 부모 위젯 -> 자식 위젯 이렇게만 전송이 가능합니다.

자식 -> 부모 이런 식의 패륜 전송이나

서로 관련없는 옆집 위젯끼리의 불륜 전송은 어렵습니다. 

 

(교훈) 그래서 많은 위젯들이 사용해야하는 중요한 state는 최대한 위에 보관해주는게 좋습니다.

중요한 것들은 그냥 MyApp 이런데 넣으면 됩니다. 

 

 

DialogUI({Key? key, this.state })

이 문법을 설명해드리겠습니다. 

 

커스텀위젯을 만들 때 class로 만듭니다.

근데 class를 사용할 때 파라미터를 입력할 수 있도록 class를 업그레이드할 수 있는데

 

class DialogUI extends StatelessWidget {
  DialogUI(this.파라미터1, this.파라미터2);
  final 파라미터1;
  final 파라미터2;

저렇게 클래스명() 이라고 한번 더 써준 다음에

거기다가 함수처럼 파라미터를 막 넣어줘서 class 업그레이드가 가능합니다.

근데 var 아니면 final 파라미터1 이런식으로 미리 변수명을 정의해야함

그럼 이제 class 사용할 때 

DialogUI(1, 2)

DialogUI('바보', '멍청이')

이렇게 쓸 수 있습니다.

근데 앞으로 데이터 2개 꼭 안넣으면 에러내줌

 

 

 

class DialogUI extends StatelessWidget {
  DialogUI({this.파라미터1, this.파라미터2});
  final 파라미터1;
  final 파라미터2;

지랄이 싫다면 { } 안에 넣어보시길 바랍니다.

그럼 선택적 파라미터를 만들 수 있습니다.

이제 2개 중에 1개만 넣거나 안넣어도 지랄안합니다. 

 

 

DialogUI({Key? key, this.state })

그래서 이제 대충 이해가 가기 시작합니다. 

key 이것도 나중에 파라미터로 입력할 수 있다는 것일 뿐 별거 아닙니다. 

 

 

Q. 그럼 자식 위젯에서 state 변경은 어떻게 하나요? 

당연히 자식 안에서 +1 한다고 해서

부모에 있던 state가 +1 되지 않습니다.

이것도 3-step 패턴이 있는데 

 

1. 부모 위젯안에 state 조작하는 함수를 미리 만들어둔 다음

2. 부모 -> 자식 이렇게 함수를 전송합니다.

3. 자식이 등록합니다.

4. 자식이 사용합니다.