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.

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close