When we create custom widgets like TextField and RaisedButton, we need to send onChanged and onPressed callback to these custom widgets.
There are 2 ways to pass a method as a parameter.
Use VoidCallBack
VoidCallBack is used when send parameter for
onPressed: () { },
I have a CustomButton widget which accepts FontAwesome Icon, Text, and a method for onPressed event.
void _onPressed() {
print('Yay');
}
CustomButton(
faIcon: FaIcon(FontAwesomeIcons.projectDiagram),
text: Text("Projects"),
onPressed: _onPressed,
),
class CustomButton extends StatelessWidget {
final FaIcon faIcon;
final Text text;
final VoidCallback onPressed;
CustomButton({Key key, this.faIcon, this.text, this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialButton(
onPressed: onPressed,
color: Colors.blue,
textColor: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
faIcon,
SizedBox(height: 10),
text,
],
),
padding: EdgeInsets.all(8),
shape: CircleBorder(),
);
}
}
The asynchronous version is AsyncCallback
.
Use ValueSetter and ValueGetter
You can use these TypeDefs when you need to work with value.
onChanged: (value) { },
//available TypeDefs for this case
typedef ValueSetter<T> = void Function(T value);
typedef ValueChanged<T> = void Function(T value);
typedef AsyncValueSetter<T> = Future<void> Function(T value);
onTap: () => value,
//available TypeDefs for this case
typedef ValueGetter<T> = T Function();
typedef AsyncValueGetter<T> = Future<T> Function();
We can use one of these functions when we need to call a DropDownButton
In a screen
void _onCategoryChanged(dynamic category){
setState(() {
_selectedCategory = category as Category;
});
}
CategoryDropdown(categories: categories, onChanged: _onCategoryChanged, selectedCategory: _selectedCategory)
The DropDownButton class
class CategoryDropdown extends StatefulWidget{
final List<Category> categories;
final ValueChanged onChanged;
final Category selectedCategory;
const CategoryDropdown({Key key, this.categories, this.onChanged, this.selectedCategory}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _CategoryDropdownState();
}
}
class _CategoryDropdownState extends State<CategoryDropdown> {
@override
Widget build(BuildContext context) {
return DropdownButton<Category>(
value: widget.selectedCategory,
isExpanded: true,
items: widget.categories.map((e) {
return DropdownMenuItem<Category>(
value: e,
child: Text(e.name),
);
}).toList(),
onChanged: widget.onChanged,
hint: Text(
"Category",
),
);
}
}
Others TypeDefs
You can define your own TypeDefs like this.