import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel @di.Injectable()
class Application implements MaterialApplication {
    final Logger _logger = new Logger('main.Application');
    final ObservableProperty<int> nrOfItems = new ObservableProperty<int>(0);
    final ObservableProperty<int> nrOfItemsDone = new ObservableProperty<int>(0,
        interval: new Duration(milliseconds: 500));
    Application() {
    }
    @override
    void run() {
        final MaterialButton addButton = MaterialButton.widget(dom.querySelector("#add"));
        final MaterialTextfield item = MaterialTextfield.widget(dom.querySelector("#item"));
        final ToDoItemComponent todo = ToDoItemComponent.widget(dom.querySelector("#todo"));
        nrOfItems.observes( () => todo.items.length );
        nrOfItemsDone.observes(() {
            int done = 0;
            todo.items.forEach((final ToDoItem item) { done += item.checked ? 1 : 0; });
            return done;
        });
        addButton.onClick.listen((_) => _addItem());
        item.hub.onKeyDown.listen((final dom.KeyboardEvent event) {
            if(event.keyCode == 13) {
                event.preventDefault();
                event.stopPropagation();
                _addItem();
                item.value = "";
            }
        });
    }
    //- private -----------------------------------------------------------------------------------
    void _addItem() {
        final MaterialTextfield item = MaterialTextfield.widget(dom.querySelector("#item"));
        final ToDoItemComponent todo = ToDoItemComponent.widget(dom.querySelector("#todo"));
        todo.addItemOnTop(new ToDoItem(false,"Cnt ${todo.incrementalIndex} (${item.value})"));
    }
}
main() {
    final Logger _logger = new Logger('main.ToDo');
    registerMdl();
    registerToDoItemComponent();
    componentFactory().rootContext(Application).run()
        .then( (final MaterialApplication application) {
            application.run();
    });
}

To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<div class="demo-preview-block">
    <div class="mdl-textfield mdl-js-textfield">
        <input id="item" class="mdl-textfield__input" type="text" autofocus />
        <label class="mdl-textfield__label" for="item">Type Something...</label>
    </div>
    <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
        Add
    </button>
    <span mdl-observe="nrOfItemsDone"></span> /
    <span mdl-observe="nrOfItems"></span>
    <div id="todo" class="todo-items"></div>
</div>

todo

...will be here soon