Flutterで親から子ウィジェットの関数を呼び出す方法:GlobalObjectKeyを使用

2024年6月2日日曜日

Flutter

t f B! P L

Flutterで親ウィジェットから子ウィジェットの関数を直接呼び出す場合、GlobalObjectKeyを使用します。この記事では、まず子ウィジェットの実装から紹介し、次に親ウィジェットの設定方法について説明します。

子ウィジェットの実装

まずは、子ウィジェット側に親から直接アクセスされるための準備をします。以下のコードは、子ウィジェット側にpublicスコープのdoSomething関数を用意しています。この関数を後述する方法で親ウィジェット側から呼び出します。

import 'package:flutter/material.dart';

class MyChildWidget extends StatefulWidget {
  MyChildWidget({Key? key}) : super(key: key);

  
  State<MyChildWidget> createState() => MyChildWidgetState();
}

class MyChildWidgetState extends State<MyChildWidget> {
  // この関数は親ウィジェットから呼び出されます
  void doSomething() {
    print("Called from parent widget!");
    // ここに必要な処理を追加する
  }

  
  Widget build(BuildContext context) {
    return Center(
      child: Text('Child Widget'),
    );
  }
}

親ウィジェットの実装

親ウィジェットでは、GlobalObjectKeyを用いて子ウィジェットのインスタンスを特定し、その関数を呼び出すことができます。以下のコードは、親ウィジェットから子ウィジェットのdoSomething関数を呼び出す例です。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 子ウィジェットにアクセスするためのGlobalObjectKey
  final GlobalKey<MyChildWidgetState> childKey = GlobalKey();

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Parent to Child using GlobalObjectKey')),
        body: MyChildWidget(key: childKey),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 子ウィジェットの関数を呼び出す
            childKey.currentState?.doSomething();
          },
          child: Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

注意点

GlobalObjectKeyを利用する際は、他の場所で同じキーを使用しないように注意が必要です。(ユニークにする必要がある)
また、過度に使用するとウィジェットツリーの管理が煩雑になるため、必要な場合にのみ使用することを推奨します。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ