Pass a method as a parameter to a widget in Flutter

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.