👏

【Flutter】VoidCallBack型とFunction型の違いについて

2023/02/03に公開1

VoidCallBack型とFunction型の違い

結論:返り値を期待するかどうか(らしい)

VoidCallback对于没有预期值的回调事件很有用。对于您想要将值返回给父级的场景,您将需要使用Function(x).(こちらが参考文献)

  • VoidCallBack型:予め値を返すのを想定しない時に有用である。例 onPressedなどのボタン処理のようなイベント通知のみでOKの時とか。
  • Function型:呼び出し元などに値を返すことを想定している時に使う
    公式のTypedefでもVoidCallback = void Function()と書かれている。つまり、「Function型のvoidがVoidCallback型である」ということ。ぽい。続けて書いてあるのが

typedef VoidCallback = void Function();とのこと。

サンプルコード

main.dart
import '../../sample.dart';

NormalButton(//①ボタンを使うときはTextとonPressedの内容だけカスタムしてあげて、UIの部分は使いまわしたいと思った。
  buttonText: '牡丹',
  onPressed: () async{ 'return'のない処理... };
  //③ここがreturnを想定しないButtonを押したときの挙動であることを確認し、②Function型->VoidCallback型に変更した
)

class NormalButton extends StatelessWidget{
  final String buttonText;
  final VoidCallback onPressed;
  //②フィールド変数の型がVoidCallBackじゃ無かったら(元々はFunction型にしていて)、以下のonPressedが回らんのはなぜ?という疑問が湧いた

  NormalButton({required this.buttonText, required this.onPressed});

  
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        shape: const StadiumBorder(),
      ),
      onPressed: onPressed,//フィールドで受け取ったカスタムしたい処理はここで使いたい
      child: Container(
          padding: EdgeInsets.symmetric(vertical: 15,horizontal: 30),
          child: Text(buttonText)
      ),
    );
  }
}

思考のポイントと流れ

  1. ボタンを使うときはTextとonPressedの内容だけカスタムしてあげて、UIの部分は使いまわしたいと思った。
  2. フィールドで受け取るonPressedの型が VoidCallBack じゃ無かったら以下のonPressedが回らん。それはなぜ?という疑問が湧いた。
  3. NormalButtonのonPressed(){処理}が returnを想定しないButtonを押したときの挙動であることを確認し、②Function型->VoidCallback型に変更した

個人的なメモに近いので悪しからず。🙇‍♂️

GitHubで編集を提案

Discussion

shinriyoshinriyo

個人的なメモに突っ込みすみませんが、VoidCallBackではなくVoidCallbackです。
Bは小文字です。プログラム言語は大文字と小文字の区別があります。