【Flutter】親 Widget と子 Widget 間でメソッドを参照する方法

Flutter

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 間でメソッドを参照する方法 は終わりです。

おすすめ書籍

コメント

タイトルとURLをコピーしました