FlutterとSEO、ときどき仕事

Dart, flutter

【Flutter】コールバック用関数を作成する【Dart】

本記事では、コールバック用関数の作り方について説明します。

参考:【アプリ開発日記】キーボードのイベントを通知する【part4】

はじめに

ユーザ操作(タップ、スワイプ)などをWidgetで受け取りたいケースや、時間のかかる処理が完了したことを通知したりするようなケースなどでコールバック関数が必要になると思います。

今回はコールバック関数の使い方と注意点について紹介します。

関数の定義

Flutterを学習している場合は、すでにコールバック関数について触れていることが多いと思います。以下の例では、ButtonのWidgetを作成する際、”onPressed:”の後ろに無名関数を定義しています。

TextButtonクラスのonPressedという名前の引数が「関数」となっています。この例では、 () { }, の部分が引数無しの無名関数となっていて、引数に渡すことでボタンが押された際に{}内の処理が呼び出されることになります。

TextButton(
  onPressed: () { },
  child: Text('TextButton'),
)

では、自前で作成したカスタムクラスやカスタムWidgetで同じような形で関数を引数に持たせれば良いのか? についてですが、以下の例のように定義することができます。今回はrequiredを付与することで必須引数としていますが、null許容するのであれば外してもOKです。ただし、

class SoftwareKeyBoard extends StatelessWidget {
  const SoftwareKeyBoard({
    Key? key,
    required this.onTapKey,  // 引数で関数を受け取れるようにする
    required this.onTapEnterKey,
    required this.onTapDeleteKey
  }) : super(key: key);

  // 関数を定義する
  final Function(String) onTapKey;
  final Function() onTapEnterKey;
  final Function() onTapDeleteKey;

  // 関数を呼び出す
  void method() {
    onTapKey('text');
    onTapDeleteKey();
  }
}

コールバックを受け取る側の実装

TextButtonの例と同様に、コンストラクタの引数で無名関数を作成すれば完了です。この例では、onTapKeyは引数ありの関数となっているため、無名関数の()内に引数を記載しています。

SoftwareKeyBoard(
  onTapEnterKey: () {
  },
 onTapKey: (String char) {
  },
  onTapDeleteKey: () {
  },
),

最後に

  • null許容する場合は、呼び出し時にnullチェックするなどをしてnullアクセスしないように注意しましょう。
  • 関数を引数に渡すことができる、という点を理解すれば、コンストラクタではなくpublicな関数の引数を関数とすることで、はじめに記載した「時間のかかる処理の後に呼び出される関数」も簡単に扱えると思います

コメントを残す