Flutter で子 widget から親の Function を呼び出す方法
サンプル
こちらをサンプルにさせていただいてます。
How to pass functions to child widgets in Flutter - Kindacode
DartPad を使用すればブラウザ上で下記のコードを実行して確認できます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// DEBUG banner
debugShowCheckedModeBanner: true,
title: 'Parent Function Call',
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
// Parent Function
void _passedFunction(String input) {
if (kDebugMode) {
print(input);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ChildWidget(
buttonHandler: _passedFunction,
),
),
);
}
}
class ChildWidget extends StatelessWidget {
// Parent Function
final Function buttonHandler;
const ChildWidget({Key? key, required this.buttonHandler}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
// Parent Function Call
onPressed: () => buttonHandler('Hello'),
child: const Text('Say Hello')),
ElevatedButton(
// Parent Function Call
onPressed: () => buttonHandler('Goodbye'),
child: const Text('Say Goodbye')),
],
);
}
}
|
親の Homepage の _passedFunction メソッドを ChildWidget の buttonHandler に保存。
そして各ボタンから実行してコンソールに出力するという流れになっています。
参考
