Flutter で、親 Widget から子 Widget のメソッドを呼び出す方法と、子 Widget から親 Widget のメソッドを呼び出す方法について紹介します!
子 Widget から親 Widget のメソッドを呼び出す方法
子 Widget に callback 関数を渡すことで、親 Widget のメソッドを子 Widget で呼び出すことができます。
子 Widget の設定
子 Widget では、以下のようにメソッドを受け取れるようにするためのプロパティ(以下の例では、callback)を追加します。
受け取ったメソッドは、14行目のように使用します。
class ChildWidget extends StatefulWidget {
final Function callback;
const ChildWidget({Key? key, required this.callback}) : super(key: key);
@override
State<ChildWidget> createState() => _ChildWidgetState();
}
class _ChildWidgetState extends State<ChildWidget> {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: ()=> widget.callback('child'),
child: const Text('print'),
);
}
}
親 Widget の設定
親 Widget では、以下の10行目のようにメソッドを子 Widget のプロパティとして渡します。
class ParentWidget extends StatelessWidget {
const ParentWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Method path between Parent and Child'),
),
body: ChildWidget(callback: printOnParent),
);
}
void printOnParent(String from) {
debugPrint('call parent method from $from');
}
}
親 Widget から子 Widget のメソッドを呼び出す方法
親 Widget から子 Widget のメソッドを呼び出すには、GlobalObjectKey を使用します。
子 Widget の設定
子 Widget では、親 Widget から参照したいメソッドを定義します。また、状態を外部から参照できるようにするため、アンダースコアをつけずに public にしておきます。
class ChildWidget extends StatefulWidget {
const ChildWidget({Key? key}) : super(key: key);
@override
State<ChildWidget> createState() => ChildWidgetState();
}
class ChildWidgetState extends State<ChildWidget> {
@override
Widget build(BuildContext context) {
return const Text('Child Widget');
}
void printOnChild(String from) {
debugPrint('call child method from $from');
}
}
親 Widget の設定
親 Widget では、まず以下の6行目のように、子 Widget の状態を使用して、GlobalObjectKey を生成します。
そして、子 Widget 配置時に、key プロパティに生成した GlobalObjectKey をセットします。(14行目)
上記までできたら、16行目のように cuurrentState を参照することで、子 Widget のメソッドを呼び出すことができます。
class ParentWidget extends StatelessWidget {
const ParentWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const key = GlobalObjectKey<ChildWidgetState>('child');
return Scaffold(
appBar: AppBar(
title: const Text('Method path between Parent and Child'),
),
body: Column(
children: [
const ChildWidget(key: key),
ElevatedButton(
onPressed: ()=> key.currentState?.printOnChild('parent'),
child: const Text('print'),
)
],
),
);
}
}
まとめ
Flutter で、子 Widget から親 Widget のメソッドを呼び出す方法、親 Widget から子 Widget のメソッドを呼び出す方法を紹介しました!
- 子 Widget から親 Widget のメソッドを呼び出すには
- 子 Widget で callback メソッドを受け取れるようにするためのプロパティを追加
- 親 Widget のメソッドを callback プロパティにセットすることで、親 Widget のメソッドを呼び出し可能
- 親 Widget から子 Widget のメソッドを呼び出すには
- 子 Widget の状態を public にして外部から参照可能に変更
- 親 Widget で、GlobalObjectKey を生成し、子 Widget にセット
- GlobalObjectKey の currentState を参照することで、子 Widget のメソッドを呼び出し可能
以上で、【Flutter】親 Widget と子 Widget 間でメソッドを参照する方法 は終わりです。
コメント