如何将 function 作为小部件中的参数传递？

Question

I created a widget and I want to pass a function to this widget, but when I try to do this I get this error.

Moreover when this function is passed to a widget it is automatically used, because it debugPrint "MONEY CHANGED".

This is the function code:

class Functions {
  changeMoney(int money) {
    Boxes.getCharacter().get(0)!.money =
        Boxes.getCharacter().get(0)!.money + money;
    debugPrint("MONEY CHANGED");
  }
}

And this is widget's code:

class DialogButton extends StatefulWidget {
  const DialogButton(
      {Key? key,
      required this.answer,
      required this.function,
      required this.possible})
      : super(key: key);
  final String answer;
  final Function function;
  final bool possible;

  @override
  State<DialogButton> createState() => _DialogButtonState();
}

class _DialogButtonState extends State<DialogButton> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: ElevatedButton(
          onPressed: () => {
                Navigator.of(context, rootNavigator: true).pop(),
                widget.function
              },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 18.0),
            child: Row(children: [
              Expanded(child: Container()),
              Text(
                widget.answer,
                style: rajdhaniStyle(weight: FontWeight.w600, size: 18),
              ),
              Expanded(child: Container()),
            ]),
          )),
    );
  }
}

So the question is how should i correctly pass a function inside widget without automatically make it turn on the function and without getting an error?

Answer 1

If the function have parameter, then the received widget (here is DialogButton ) also need to declare parameter type. Example, the function is: void doSomething(String hehe, int yolo) {} . Then your DialogButton should be declare as Function(String, int) onTap .

More details, in first screen, you can call DialogButton like this:

class Screen1 extends StatelessWidget {
  @override
  build(...) {
    // do something
      DialogButton(
        answer: "your answer",
        function: (double money) {},
        possible: true,
      )
  }
}

Otherwise, if you want to split/separate the function (not write-in-line like above), you could do as follow:

class Screen1 extends StatelessWidget {
  @override
  build(...) {
    // do something
      DialogButton(
        answer: "your answer",
        function: myFunction,
        possible: true,
      )
  }
  
  myFunction(double money) {}
}