[Flutter]11 자식위젯에서 부모위젯의 state 사용하기

[Flutter]ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의

---

저번 실습과제를 한번 보자

일단 다이얼로그는 커스텀위젯화 시킨다.

              onPressed: (){ Navigator.pop(context);},),

그리고 창을 닫아야 하는 기능을 넣어야 하는데 

Navigator.pop( )  이거 실행하면 닫힌다. -> 현재 페이지 닫아주세요.

---

만약에 부모 위젯의 state 를 그 위젯 안에 있는 자식 위젯이 쓰고 싶다면 어떻게 할까?

부모에서 자식으로 state 를 전송해야한다.

(보내기 -> 등록하기 -> 쓰기)

 

전송하는 법은 다음과 같다

그리고 등록은 아래와 같이 2곳에다가 해줘야 한다.

final 로 하면 나중에 이 변수를 수정할 수 없다.

여기선 state 의 타입을 final로 해줘야 오류가 없다.

관습적으로 부모가 보낸 state 를 등록할 때에는 final로 많이 만든다.(read-only 가 좋기 때문!)

그다음에는 자식 위젯에서 말그대로 쓰면된다!

나는 부모위젯에 있던 a = 3; 을 가져다 쓰려고 이 과정을 거쳤던 것인데 

DialogUI 위젯에서도 a 를 쓸 수 있게 되었다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home : MyApp()
   )
  );
}



class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var a = 3;
  var like = [0,0,0];
  var name = ['해리', '론', '헤르미온느'];
  @override
  Widget build(BuildContext context) {

    return Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: (){
              showDialog(context: context, builder: (context){
                return DialogUI(state : a);
              });
            },
          ),
            appBar: AppBar(),
            bottomNavigationBar: BottomAppBar(),
            body: ListView.builder(
                itemCount: 3,
                itemBuilder: (c, i){
                  return ListTile(
                    leading: Icon(Icons.account_box),
                    title: Text(name[i])
                  );
                },
            )
            );


  }
}

class DialogUI extends StatelessWidget {
  const DialogUI({Key? key, this.state}) : super(key: key);
  final state;
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: SizedBox(
        width: 300,
        height: 300,
        child: Column(
          children: [
            TextField(),
            TextButton( child: Text(state.toString()),
              onPressed: (){},),
            TextButton( child: Text('취소'),
              onPressed: (){ Navigator.pop(context);},),

          ],
        ),
      )
    );
  }
}

---

참고로 자식위젯에서 부모위젯으로 state 를 전송하는건 불가능

같은 부모안에서 다른 자식위젯한테 보내는 것도 불가능

 

오직 부모-> 자식 만 가능하다

 

따라서 많은 곳에서 쓰는 state 는 부모위젯에 들어있을 수록 좋다

---

실습과제 : 완료 버튼을 누르면 a 라는 state가 +1이 되게 하기

현상황

state를 +1 해주는 함수를 만들어서 그거를 자식위젯으로 전송해보자.