import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel
class _Language {
    final String name;
    final String type;
    _Language(this.name, this.type);
}
class _Natural extends _Language {
    _Natural(final String name) : super(name,"natural");
}
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
    final Logger _logger = new Logger('main.Application');
    final ObservableList<_Language>  languages = new ObservableList<_Language>();
    final ObservableProperty<String> time = new ObservableProperty<String>("",interval: new Duration(seconds: 1));
    final ObservableProperty<String> records = new ObservableProperty<String>("");
    Application() {
        records.observes(() => (languages.isNotEmpty ? languages.length.toString() : "<empty>"));
        time.observes(() => _getTime());
    }
    @override
    void run() {
        languages.add(new _Natural("English"));
        languages.add(new _Natural("German"));
        languages.add(new _Natural("Italian"));
        languages.add(new _Natural("French"));
        languages.add(new _Natural("Spanish"));
        new Timer(new Duration(seconds: 2),() {
            for(int index = 0;index < 10;index++) {
                languages.add(new _Natural("Sample - $index"));
            }
        });
    }
    void remove(final String language) {
        _logger.info("Remove $language clicked!!!!!");
        final _Language lang = languages.firstWhere(
                (final _Language check) {
                    final bool result = (check.name.toLowerCase() == language.toLowerCase());
                    _logger.fine("Check: ${check.name} -> $language, Result: $result");
                    return result;
                });
        if(language == "German") {
            int index = languages.indexOf(lang);
            languages[index] = new _Natural("Austrian");
        } else {
            languages.remove(lang);
        }
    }
    //- private -----------------------------------------------------------------------------------
    String _getTime() {
      final DateTime now = new DateTime.now();
      return "${now.hour.toString().padLeft(2,"0")}:${now.minute.toString().padLeft(2,"0")}:${now.second.toString().padLeft(2,"0")}";
    }
}
main() {
    final Logger _logger = new Logger('main.MaterialRepeat');
    registerMdl();
    componentFactory().rootContext(Application).run(enableVisualDebugging: true)
        .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">
    <p>
        Wait 2 secs - A timer will add 10 more List-Items!<br>
        If you "REMOVE" "German" - it will be replace with "Austrian"
    </p>
    <p>
        Now it's: <span mdl-observe="time"></span><br>
        Nr. of records: <span mdl-observe="records"></span><br>
    </p>
    <div mdl-repeat="language in languages">
         
        <div template class="language" >
            Language: {{language.name}} ({{language.type}})
            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
                    data-mdl-click="remove({{language.name}})">Remove</button>
        </div>
         
    </div>
</div>

observe

...will be here soon