반응형
플러터에서 부모 자식간 함수 호출 하는법.
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"),
),
);
}
}
반응형