import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
    final Logger _logger = new Logger('main.Application');
    final ObservableProperty<double> pi = new ObservableProperty<double>(3.14159265359);
    final ObservableProperty<String> name = new ObservableProperty<String>("Mike");
    final ObservableProperty<bool> checkStatus = new ObservableProperty<bool>(false);
    final List<String> xmen;
    
    Application() : xmen = ['Angel/Archangel', 'Apocalypse', 'Bishop', 'Beast','Caliban','Colossus',
                            'Cyclops','Firestar','Emma Frost','Gambit','High Evolutionary','Dark Phoenix',
                            'Marvel Girl','Iceman','Juggernaut','Magneto','Minos','Mr. Sinister','Mystique',
                            'Nightcrawler','Professor X','Pyro','Psylocke','Rogue','Sabretooth','Shadowcat','Storm',
                            'Talker','Wolverine','X-23' ];
    @override
    void run() {
        final Math.Random rnd = new Math.Random();
        new Timer.periodic(new Duration(milliseconds: 500),(final Timer timer) {
            final int index = rnd.nextInt(xmen.length);
            name.value = xmen[index];
            checkStatus.value = index % 2;
        });
    }
    //- private -----------------------------------------------------------------------------------
}
main() async {
    final Logger _logger = new Logger('main.Formatter');
    registerMdl();
    final MaterialApplication application = await componentFactory().
        rootContext(Application).run(enableVisualDebugging: true);
    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">
    <h5>Number-Formatter</h5>
    PI: <span mdl-observe="pi"></span><br>
    PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
    <br>
    <h5>Uppercase / Lowercase</h5>
    Name: <span mdl-observe="name"></span><br>
    Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
    Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
    <br>
    <h5>Choose-Formatter</h5>
    Status is: <span mdl-observe="checkStatus | choose(value, 'Valid!','OFF')"
                     mdl-class="!checkStatus : 'status-off'"></span>
</div>

formatter

...will be here soon