Overview .
플러터에서의 콜백 함수를 알아 보자
- 플러터에서 코랙 함수 (callback function) 이란?
- 예제 코드
- 예제 코드 간략 설명
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 함수이다. 한마디로 말만 자식의 함수를 호출하는 식이지 실제로는 부모 함수를 호출하는 것과 똑같은 효과를 얻을 수 있는 것 같다.
'flutter & dart' 카테고리의 다른 글
flutter & dart - dart:convert 파싱 (parsing) (0) | 2024.03.15 |
---|---|
flutter & dart - dart 비동기 프로그래밍 , Future 타입 (0) | 2024.03.14 |
flutter & dart - InkWell (0) | 2024.03.13 |
flutter & dart - CupertinoDialog (0) | 2024.02.29 |
flutter & dart - Stack 위젯과 Positioned 위젯 (0) | 2024.02.28 |