Parent-Child Widget method 호출 - 1

flutter 는 widget들의 조합이다. 화면이 복잡해져 위젯이 많아 질수록 코드는 거대 해진다. 가독성을 위해 위젯을 분할하는 것이 중요하다. 위젯을 별도의 class 로 분리했을 때 child-Parent widget 사이의 method를 호출하는 법에 대해 알아보았다.

Child -> Parent 함수 호출

Child instance 생성 시 parameter로 Parent Widget의 callBack 함수 전달, child 에서 call

• child widget

class ChildWidget extends StatefulWidget {
  final VoidCallback onTapped;
  const ChildWidget({Key? key, required this.onTapped}) : super(key: key);

  @override
  State<ChildWidget> createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.onTapped.call,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    );
  }
}

• parnet widget

            ChildWidget(
              onTap: () {
                Get.snackbar('알림', '자식 위젯 onTapped');
              },
            )

CallBack 함수의 parameter 로 data 를 전달하고 싶은 경우?

callback 함수의 정의는 다음과 같다.

typedef void VoidCallback();

데이터를 담고 싶다면 typedef 로 함수를 정의하여 child 로 전달할 수 있다.

• child Widget Code

typedef Int2VoidFunc = void Function(int arg);

class ChildWidget extends StatefulWidget {
  final Int2VoidFunc onTapped;
  const ChildWidget({Key? key, required this.onTapped}) : super(key: key);

  @override
  State<ChildWidget> createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        widget.onTapped(5);
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    );
  }
}

• Parent Widget Code

            ChildWidget(
              onTapped: (arg) {
                Get.snackbar('알림', '자식 위젯 onTapped, $arg');
              },
            )