With the Material Design Lite (MDL) model component you can automatically observer your data-model.
1. Code one of the supported elements for example a checkbox:
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" value="android"/>
<span class="mdl-checkbox__label">Android</span>
</label>
2. Add the mdl-model attribute to your component and specify the variable you want to observe. In this
case "myModel"
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" value="android"
mdl-model="myModel"/>
<span class="mdl-checkbox__label">Android</span>
</label>
3. In your Application-class - add the model you want to observe, in this case "myModel". The variable-type should be
ObservableProperty to provide the full functionality.
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
final Logger _logger = new Logger('main.Application');
final ObservableProperty<String> myModel = new ObservableProperty<String>("");
Application() {
}
@override
void run() {
}
}
main() async {
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
}
You can use mdl-model with the following components: