events()

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

Using manual event handlers

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:

Using events utility

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.

When using the events() utility you don't have access to the original Event property. When this is needed you need to fall back to using a normal Map of event names to callbacks.

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) {})

Get Started

Key Concepts

Going Further

Ecosystem

Components