Pass method as parameter to a widget
There are a few predefined types that already exist.
VoidCallback
If you want to create a parameter something like this:
onPressed: () { },
Then you can define it in your class like so:
class MyWidget extends StatelessWidget {
MyWidget({Key key, this.onPressed}) : super(key: key);
final VoidCallback onPressed;
// ...
}
Notes
The typedef
is defined in the source code like this:
typedef VoidCallback = void Function();
The asynchronous version is AsyncCallback
.
typedef AsyncCallback = Future<void> Function();
ValueSetter
If you want to create a parameter something like this:
onPressed: (value) { },
Then you can define it in your class like so:
class MyWidget extends StatelessWidget {
MyWidget({Key key, this.onPressed}) : super(key: key);
final ValueSetter<String> onPressed;
// ...
}
Notes
The typedef is defined in the source code like this:
typedef ValueSetter<T> = void Function(T value);
If you want to specify that the function only gets called when there is a change then use ValueChanged instead.
typedef ValueChanged<T> = void Function(T value);
The asynchronous version is AsyncValueSetter
.
typedef AsyncValueSetter<T> = Future<void> Function(T value);
ValueGetter
If you want to create a parameter something like this:
onPressed: () => value,
Then you can define it in your class like so:
class MyWidget extends StatelessWidget {
MyWidget({Key key, this.onPressed}) : super(key: key);
final ValueGetter<String> onPressed;
// ...
}
Notes
The typedef is defined in the source code like this:
typedef ValueGetter<T> = T Function();
The asynchronous version is AsyncValueGetter
.
typedef AsyncValueGetter<T> = Future<T> Function();
Define your own type
As you can see from all of the examples above, everything is just a typedef
for a Function
. So it is easy enough to make your own.
Say you want to do something like this:
onEvent: (context, child) => value,
Then you would make the typedef like this:
typedef MyEventCallback = int Function(BuildContext context, Widget widget);
And use it like this:
class MyWidget extends StatelessWidget {
MyWidget({Key key, this.onEvent}) : super(key: key);
final MyEventCallback onEvent;
// ...
}
See the documentation for more.
Use the VoidCallback type, like this. Check the line comments on the code as well for more information:
class Button extends StatelessWidget {
final String text;
final VoidCallback callback; // Notice the variable type
Button(this.text, this.callback);
@override
Widget build(BuildContext context) {
return Container(
height: 50,
child: SizedBox(
width: double.infinity,
child: RaisedButton(
onPressed: callback, // Simply put the function name here, DON'T use ()
child: Padding(
padding: EdgeInsets.symmetric(vertical: 13),
child: Text(
text,
style: TextStyle(fontWeight: FontWeight.bold),
)),
color: COLOR_BLUE,
textColor: Colors.white,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
),
),
);
}
}