본문 바로가기

카테고리 없음

플러터 에서 부모/자식 간의 함수 호출, 함수 콜백 (flutter callback, child function call )

반응형

플러터에서 부모 자식간 함수 호출 하는법. 

1. 부모에서 자식의 함수 호출 
다트 클래스 만들때 마다 key 상속 받는걸 어디다 쓰나 했는데.. 다 이유가 있었음. 

import 'package:flutter/material.dart';

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  // 자식 위젯의 상태에 접근할 수 있는 GlobalKey 선언
  final GlobalKey<_ChildPageState> childKey = GlobalKey<_ChildPageState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Parent Page")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 자식 위젯에 GlobalKey 전달
          ChildPage(key: childKey),
          ElevatedButton(
            onPressed: () {
              // 부모에서 자식의 함수를 호출
              childKey.currentState?.childFunction();
            },
            child: Text("Call Child Function"),
          ),
        ],
      ),
    );
  }
}

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

  @override
  _ChildPageState createState() => _ChildPageState();
}

class _ChildPageState extends State<ChildPage> {
  // 자식 페이지의 함수
  void childFunction() {
    print("Child function called from Parent");
    setState(() {
      // UI 변화를 원할 경우 여기에 작성
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Child Page"),
    );
  }
}

 

 

2. 자식이 부모의 함수를 호출 ( callback ) 
당영한 얘기지만 voidCallback 대신 함수를 넘겨도 된다. 

import 'package:flutter/material.dart';

class ParentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Parent Page")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ChildPage(
            // 콜백 함수 전달
            onCallBack: () {
              print("Child function called from Parent");
            },
          ),
        ],
      ),
    );
  }
}

class ChildPage extends StatelessWidget {
  final VoidCallback onCallBack;

  const ChildPage({Key? key, required this.onCallBack}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: onCallBack, // 부모의 콜백 함수 호출
        child: Text("Call Parent Function"),
      ),
    );
  }
}
반응형