import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel
class _Language {
    final String name;
    final String type;
    _Language(this.name, this.type);
}
@MdlComponentModel
class _Name {
    final String first;
    final String last;
    _Name(this.first, this.last);
    @override
    String toString() {
        return "$first $last";
    }
}
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>("");
    final ObservableProperty<_Name>  nameObject = new ObservableProperty<_Name>(null);
    final ObservableProperty<bool>   isNameNull = new ObservableProperty<bool>(true);
    final List<_Name> _names = new List<_Name>();
    Application() {
        records.observes(() => (languages.isNotEmpty ? languages.length.toString() : "<empty>"));
        time.observes(() => _getTime());
        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"));
        _names.add(new _Name("Bill","Gates"));
        _names.add(new _Name("Steven","Jobs"));
        _names.add(new _Name("Larry","Page"));
        _names.add(null);
    }
    @override
    void run() {
        new Timer(new Duration(seconds: 2),() {
            for(int index = 0;index < 10;index++) {
                languages.add(new _Natural("Sample - $index"));
            }
        });
        int counter = 0;
        new Timer.periodic(new Duration(milliseconds: 1000),(final Timer timer) {
            nameObject.value = _names[counter % 4]; // 0,1,2,...
            isNameNull.value = nameObject.value == null;
            counter++;
        });
    }
    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>
        <h5>Customized 'ObservableProperty'</h5>
        Now it's: <span mdl-observe="time"></span><br>
    </p>
    <div class="object-test">
        <h5>Observes Object (_Name) with 'null' check</h5>
        <div mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></div>
        <div mdl-observe="nameObject" class="name mdl-color--100">
             
            <template>
                <div>
                    Firstname: {{first}},<br>
                    Last name: {{last}}<br>
                    <div>Text in <strong>DIV</strong></div>
                </div>
            </template>
             
        </div>
    </div>
    <p>
        <h5>Observable-List</h5>
        Wait 2 secs - A timer will add 10 more List-Items!<br>
        If you "REMOVE" "German" - it will be replace with "Austrian"<br><br>
        Nr. of records: <strong><span mdl-observe="records"></span></strong><br>
        <div mdl-repeat="language in languages">
             
            <template>
                <div 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>
            </template>
             
        </div>
    </p>
</div>

observe

...will be here soon