events()

You can attach event handlers to every html element like this:

yield div(events: {
  'click': (event) {
    print('Clicked');
  },
}, [text('Click Me')]);

By default, you provide a Map<String, EventCallback> with the event name and a callback, taking in the Event as its only parameter.

The events() utility method provides bindings to some common event types in a more type-safe way. The same element from above using the events() method looks like this:

yield div(events: events(onClick: () {
  print('Clicked');
}), [text('Click Me')]);

As shown, the result of the events() call can be passed directly to the events: parameter of a html component.

Event Bindings

It has bindings to the following events:

onClick

The onClick handler binds to the click event and is a callback with no parameters.

onInput

The onInput handler binds to the input event and is a callback with a single parameter value.

The type of the value parameter must be a generic type according to the target element:

• bool? for checkbox or radio input elements
• num? for number input elements
• DateTime for date input elements
• List<File>? for file input elements
• List<String> for select elements
• String for text input and textarea elements
• Null for all other elements

yield input(type: InputType.checkbox, events: events(onInput: (bool? value) {
  print('Checked: $value');
}, []);

onChange

The onChange handler binds to the change event and is a callback with a single parameter value.

The type of the value parameter must be a generic type according to the target element:

• bool? for checkbox or radio input elements
• num? for number input elements
• DateTime for date input elements
• List<File>? for file input elements
• List<String> for select elements
• String for text input and textarea elements
• Null for all other elements

yield textarea(events: events(onChange: (String value) {
  print('Content: $value');
}, []);

Component Shortcuts

Some interactive html components have shortcut parameters for certain common event types. These work the same as above but are direct parameters on the html component accepting the respective event handler:

• button(onClick: () {})
• input(onInput: (value) {}, onChange: (value) {})
• select(onInput: (value) {}, onChange: (value) {})
• textarea(onInput: (value) {}, onChange: (value) {})