Flutter: Passing a function as parameter to a Stateful Widget Class

Question

I have a stateful widget that returns a scaffold as follows:

class TimerPage extends StatefulWidget {
  const TimerPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  TimerPageState createState() => TimerPageState();
}

class TimerPageState extends State<TimerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          getMaterialTextButton('1', 'Roboto', 24, keypadPressed('1')),   /// ERROR
          getMaterialTextButton('2', 'Roboto', 24, keypadPressed2('2')),  /// ERROR
        ]
      ),
    );
  }
}

So what I'm trying to do is pass a generic function inside getMaterialTextButton() that will return a material button as follows:

// this function is within the TimerPageState class
Widget getMaterialTextButton(String text, String fontname, double fontsize, Function onPressAction) {
  return (
    MaterialButton(
      onPressed: () {
        onPressAction(text);
      },
      color: Colors.blue,
      textColor: Colors.white,
      child: Text(
          text,
          style: TextStyle(fontFamily: fontname, fontSize: fontsize)
      ),
      padding: const EdgeInsets.all(24),
      shape: const CircleBorder(),
    )
  );
}

// this function is to be called when the button 1 is pressed
// also resides inside TimerPageState class
void keyPressed (String text) {
   print('Pressed: $text');
}

// this function is also to be called when button 2 is pressed
// also resides inside TimerPageState class
void keyPressed2 (String text) {
   print('Pressed: $text');
}

But this doesn't seem to work as dart is giving me an exception: Exception has occurred. _TypeError (type 'Null' is not a subtype of type 'Function') . How can I do this operation properly?

Answer 1

Firstly you should prefer a full signature in your function type annotations https://dart.dev/guides/language/effective-dart/design#prefer-signatures-in-function-type-annotations

so

Widget getMaterialTextButton(String text, String fontname, double fontsize, Function onPressAction) {...}

should be

Widget getMaterialTextButton(String text, String fontname, double fontsize, void Function(String) onPressAction) {...}

Secondly, this is not passing in a function:

getMaterialTextButton('1', 'Roboto', 24, keypadPressed('1')),

That is calling the keypadPressed and passing in the result of the function, which appears to be void. Remove the parenthesis, and do not pass anything into keypadPressed, the body of getMaterialTextButton is where the function should be called.

getMaterialTextButton('1', 'Roboto', 24, keypadPressed),

Answer 2

you are passing the return value of the function, not the function itself

change this

getMaterialTextButton('1', 'Roboto', 24, keypadPressed('1')),

to this

getMaterialTextButton('1', 'Roboto', 24, keypadPressed),