플러터) 콜백메서드, 아이의 일을 부모가 알게 하자

피호출자가 다시 호출자의 메서드를 호출하는 것을 콜백(callback)이라고 하며

그러한 메서드를 콜백 메서드라고 한다.

 

🤸‍♂️자식 위젯에서 이벤트가 발생했을때
이 사실을 👨‍🦰부모위젯에도 알리려면??

이를 가능하게 도와주는 것이 콜백메서드다.

 

콜백메서드는 실무에서 굉장히 많이 쓰이는 부분이라고 한다.

 

플러터 프로젝트에서 콜백메서드를 어떻게 연결하는지 알아본다.

플러터에서는 주로 생성자를 통해 콜백함수를 연결한다.

메서드로 연결하는 방법도 있다.

 

예제)

ParentView라는 부모 위젯은 ChildA / ChildB라는 자식 위젯에게 handleReciever라는 함수를 콜백으로 전달한다.
자식 위젯들은 사용자의 탭 이벤트를 감지해 전달받은 handleReciever 함수를 호출, ParentView의 텍스트를 변경하고 화면을 업데이트하게 된다.

import 'package:flutter/material.dart';

// 코드의 시작점 (엔트리포인트)
void main() {
  runApp(const MyApp());
}

// 앱의 전체적인 구조와 테마를 정의하는 루트 위젯
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ParentView(),
    );
  }
}

 

부모위젯

handleReciever 라는 이름의 함수(콜백으로 사용될 함수)를 정의힌다.
이 함수는 부모의 상태를 변경하는 로직을 가진다.
자식 위젯을 생성할 때 onCallback이라는 이름의 매개변수를 통해 handleReciever 함수를 전달한다.

// 홈 화면 역할을 하는 위젯, 자식으로부터 콜백을 받아 상태를 변경함
class ParentView extends StatefulWidget {
  const ParentView({super.key});

  @override
  State<ParentView> createState() => _ParentViewState();
}

// ParentView 위젯의 상태를 관리하는 클래스
class _ParentViewState extends State<ParentView> {
  String displayText = '여기는 부모 영역이다';

  // **콜백 함수 정의:** ChildA 위젯에서 이벤트가 발생했을 때 호출될 함수.
  // 이 함수는 ParentView의 상태(displayText)를 변경하고 UI를 업데이트하는 역할을 함.
  void handleReciever() {
    setState(() {
      displayText = '자식 위젯에서 연락이 왔어';
    });
    print('===== ===== ===== =====');
    print(displayText);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: Center(
                child: Text(displayText),
              ),
            ),
            Expanded(
              flex: 1,
              // **콜백 함수 전달:** ChildA 위젯을 생성할 때,
              // `onCallback` 이라는 이름의 매개변수를 통해 `handleReciever` 함수 자체를 전달함.
              // 이를 통해 ChildA는 ParentView 내부의 `handleReciever`를 호출할 수 있게 됨.
              child: ChildA(onCallback: handleReciever),
            ),
            Expanded(
              flex: 1,
              child: ChildB(),
            ),
          ],
        ),
      ),
    );
  }
}

 

자식위젯

onCallback 이라는 이름의 Function 타입 변수를 선언하여 부모로부터 전달받은 함수를 저장한다.
자신의 특정 이벤트(onTap)가 발생했을 때 onCallback()을 호출한다.

// 자식 위젯 A: 부모로부터 콜백 함수를 받아 특정 이벤트 발생 시 호출함
class ChildA extends StatelessWidget {
  // **콜백 함수 타입 선언:** 부모로부터 전달받을 함수를 저장하기 위한 변수.
  // 이 변수에는 ParentView의 `handleReciever` 함수가 할당될 것임.
  final Function onCallback; // 실제로는 VoidCallback 같은 더 구체적인 타입을 사용하는 것이 좋음

  // **생성자에서 콜백 함수 받기:** `onCallback` 매개변수를 통해 부모로부터 함수를 주입받음.
  ChildA({required this.onCallback, super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: InkWell(
        // **이벤트 발생 시 콜백 호출:** ChildA의 Container가 탭(onTap)되었을 때,
        // 부모로부터 전달받은 `onCallback` 함수를 실행함.
        // 결과적으로 ParentView의 `handleReciever` 메소드가 호출됨.
        onTap: () {
          onCallback();
        },
        child: Container(
          width: double.infinity,
          color: Colors.orange,
          child: Center(child: Text('ChildA')),
        ),
      ),
    );
  }
}

// 자식 위젯 B (현재 콜백 메커니즘과 직접적인 관련은 없음)
class ChildB extends StatelessWidget {
  const ChildB({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: InkWell(
        onTap: () {
          print("ChildB 위젯에서 onTap 이벤트 발생!");
        },
        child: Container(
          width: double.infinity,
          color: Colors.blue,
          child: Center(child: Text('ChildB')),
        ),
      ),
    );
  }
}

 

실행화면

ChildA에서 onCallback()이 호출되면
실제로는 ParentView에 정의된 handleReciever 함수가 실행된다.
이를 통해 자식 위젯의 이벤트가 부모 위젯의 상태 변경 및 UI 업데이트로 이어지게 된다.

자식위젯을 클릭하자 부모위젯의 텍스트 위젯이 다시 렌더링됐다.