APP/Flutter

플러터 자식 위젯이 부모 위젯의 state를 변경하고 싶으면 4-step

개발자 aloe 2022. 8. 7. 01:10
728x90

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

2. 부모 -> 자식 이렇게 state 조작하는 함수를 전송합니다.

3. 자식은 그걸 등록합니다.

4. 자식은 그걸 씁니다.

 

자식은 부모가 가진 변수를 함부로 조작할 수 없기 때문에 

저렇게 간접적으로 조작하면 되는 것일 뿐입니다. 

버그도 줄일 수 있고 오히려 장점도 있겠군요. 

 

 

class _MyAppState extends State<MyApp> {
  var name = ['김영숙', '홍길동', '피자집'];
  var total = 3;

  addOne() {
    setState(() {
      total++;  
    });
  }

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

자식에서 total 이라는 state를 +1 해볼겁니다.

저는 일단 addOne() 이라는 함수를 만들었습니다. 그거 실행하면 state를 +1 해줍니다.

(Dart 언어에선 함수만들 때 function 키워드같은거 안붙여도 됩니다)

 

 

(MyApp 안의 DialogUI() 쓰던 곳)
DialogUI( addOne : addOne ) 

2. 자식 위젯에 그 함수를 전송합니다.

전송방법은 똑같죠 뭐 함수도 변수랑 똑같습니다. 

작명하기 귀찮으면 같은 이름으로 전송합시다. 

 

 

 

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

3. 자식은 파라미터로 함수 들어올 수 있다고 등록합니다. 

this.작명한거

var/final 작명한거

두개를 추가해주면 등록 끝입니다.

 

 

 

(DialogUI위젯 내부)

TextButton(
  child: Text('완료'),
  onPressed: (){
    addOne();
  },
), 

4. 함수 맘대로 씁니다 이제 

그럼 완료버튼 누르면 addOne() 이게 동작하고 이거 동작하면 total이라는게 +1 되겠군요.

진짠지 확인하고 싶으면 total 이라는 state를 아무데나 Text()로 출력해봅시다.

 

728x90