👏
【Flutter】VoidCallBack型とFunction型の違いについて
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)
),
);
}
}
思考のポイントと流れ
- ボタンを使うときはTextとonPressedの内容だけカスタムしてあげて、UIの部分は使いまわしたいと思った。
- フィールドで受け取るonPressedの型が
VoidCallBack
じゃ無かったら以下のonPressedが回らん。それはなぜ?という疑問が湧いた。 - NormalButtonの
onPressed(){処理}
が returnを想定しないButtonを押したときの挙動であることを確認し、②Function型->VoidCallback型に変更した
個人的なメモに近いので悪しからず。🙇♂️
Discussion
個人的なメモに突っ込みすみませんが、
VoidCallBack
ではなくVoidCallback
です。Bは小文字です。プログラム言語は大文字と小文字の区別があります。