flutter & dart - 콜백 (callback) 함수

Overview . 

플러터에서의 콜백 함수를 알아 보자

1. 플러터에서 코랙 함수 (callback function) 이란?
2. 예제 코드
3. 예제 코드 간략 설명

 

1. 플러터에서 콜백 함수(callback function)란?

플러터에서 콜백 함수(callback function)는 한 위젯이나 클래스가 다른 위젯이나 클래스에게 특정 작업을 수행하도록 요청을 보내는 방법입니다. 일반적으로, 위젯의 부모가 자식 위젯에게 콜백 함수를 제공하여, 자식 위젯이 특정 상황에 부모 위젯에게 정보를 전달할 수 있게 합니다.

콜백은 자주 사용되는 프로그래밍 패턴 중 하나로, 함수나 메서드를 인자로 전달하여 나중에 어떤 시점에 호출되게 하는 것을 말합니다.

 

 

2. 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// MyApp
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ParentsView(),
    );
  }
}

// ParentsView
class ParentsView extends StatefulWidget {
  const ParentsView({super.key});

  @override
  State<ParentsView> createState() => _ParentsViewState();
}

class _ParentsViewState extends State<ParentsView> {
  String childMsgContent = "여기는 부모위젯 영역이야";

  // 자식 위젯한테 전달할 함수를 설계한다.
  void onCallBackPressedChildA() {
    setState(() {
      childMsgContent = "Child A 에게 연락 왔어";
    });
  }

  void onCallBackPressedChildB() {
    setState(() {
      childMsgContent = "Child B 에게 연락 왔어";
    });
  }

  void onCallBackPressedChildC(String msg) {
    setState(() {
      childMsgContent = msg;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(flex: 1, child: Center(child: Text(childMsgContent))),
            // 1.
            Expanded(
                flex: 1,
                child: ChildA(
                  callback: onCallBackPressedChildA,
                )),
            // 2.
            Expanded(
                flex: 1,
                child: ChildB(
                  callback: onCallBackPressedChildB,
                )),
            // 3.
            Expanded(
                flex: 1,
                child: ChildC(
                  onCallback: onCallBackPressedChildC,
                )),
          ],
        ),
      ),
    );
  }
}

// ChildA
class ChildA extends StatelessWidget {
  // 함수
  final VoidCallback callback;

  const ChildA({required this.callback, super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: InkWell(
        onTap: callback,
        child: Container(
          color: Colors.orange,
          child: Center(child: Text("Child A")),
        ),
      ),
    );
  }
}

// ChildB
class ChildB extends StatelessWidget {
  // 함수 타입
  final VoidCallback callback;

  // 생성자
  const ChildB({required this.callback, super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: InkWell(
        onTap: callback,
        child: Container(
          width: double.infinity,
          color: Colors.red,
          child: Center(child: Text("CHILD B")),
        ),
      ),
    );
  }
}

class ChildC extends StatelessWidget {
  // 함수 모양 설계 변경
  final Function(String msg) onCallback;
  // 생성자
  const ChildC({required this.onCallback, super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: InkWell(
        onTap: () {
          onCallback("Child C 에게 연락이 왔어");
        },
        child: Container(
          width: double.infinity,
          color: Colors.blue,
          child: Center(child: Text("Child C")),
        ),
      ),
    );
  }
}

 

 

3. 예제 코드를 간략하게 보자

child A 와 B는 InkWell 로 눌렀을 때 void 콜백함수 즉 연산을 부모에서 하는 콜백이다. 여기까지는 아무래도 이해가 될 것이다.

 

그렇다면 자식이 연산을 해서 그 연산 값을 부모에게 전달 하려면? 이라는 문제는 child C 에 있다.

 

부모 위젯에 매개변수로 받을 String 타입 msg 를 설계한다.

  void onCallBackPressedChildC(String msg) {
    setState(() {
      childMsgContent = msg;
    });

 

그리고 자식에게 넘겨줄 함수는 onCallback 으로 내려준다.

            // 3.
            Expanded(
                flex: 1,
                child: ChildC(
                  onCallback: onCallBackPressedChildC,
                )),

 

flutter 에서 기본 제공되는 VoidCallback 은 리턴 타입이 말 그대로 void 이므로 연산값을 넘겨 줄 수 없으므로 우리가 임의적으로 함수를 만들어 준다.

Function 함수 매개변수 String 타입 msg 이며 함수 이름은 onCallback 이다.

  // 함수 모양 설계 변경
  final Function(String msg) onCallback;

 

그리고 자식에서 Inkwell 의 onTap 을 눌렀을때 함수를 호출하여 부모에게 전달한다. 

        onTap: () {
          onCallback("Child C 에게 연락이 왔어");
        },

 

InkWell 의 onTap 의 익명함수 () {}는 내부적으로 매개변수가 없으므로 onTap 익명함수 안에 함수를 호출하도록 설계한다.

 

위는 그냥 딱 그정도로 말한거고 다시한번 말해보자

좀 더 깊게 설명하면 부모의 주소값을 자식이 주소값을 참조하고 있다라고 말할 수 있는 것이다.

  1. 부모 함수 주소값 : 1
  void onCallBackPressedChildC(String msg) {
    setState(() {
      childMsgContent = msg;
    });
    
  2. 부모 함수의 주소값 (1) 을 자식에게 넘겨 준다.
      Expanded(
          flex: 1,
          child: ChildC(
            onCallback: onCallBackPressedChildC,
        )),
  
 3. 부모의 함수 주소값 (1) 을 가지게 되는 자식 함수를 만든다.
   // 함수 모양 설계 변경
  final Function(String msg) onCallback;
 
 4. 생성자를 통해서 부모의 함수 주소값 (1) 을 자식 함수로 넣는다.
 // 생성자
  const ChildC({required this.onCallback, super.key});

 

따라서 자식 함수는 부모의 함수 주소값 (1)을 가지게 된다.

 

 

 

4. 여기까지

여기까지 callback 함수이다. 한마디로 말만 자식의 함수를 호출하는 식이지 실제로는 부모 함수를 호출하는 것과 똑같은 효과를 얻을 수 있는 것 같다.