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<bool> checkAttribute = new ObservableProperty<bool>(false);
    Application() {
    }
    @override
    void run() {
    }
    //- private -----------------------------------------------------------------------------------
}
main() async {
    final Logger _logger = new Logger('main.Attribute');
    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">
    <div class="controls">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="sample-text-attribute" mdl-attribute="!checkAttribute : 'disabled' "/>
            <label class="mdl-textfield__label" for="sample-text-attribute" mdl-class="checkAttribute : 'enabled'">
                <span class="enabled">Type something</span>
                <span class="disabled">I'm Disabled</span>
            </label>
        </div>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" mdl-attribute="!checkAttribute : 'disabled' ">Submit</button>
    </div>
    <div class="switches">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-attribute">
            <input type="checkbox" id="switch-attribute" class="mdl-switch__input" mdl-model="checkAttribute"/>
            <span class="mdl-switch__label">Turn 'disabled' on/off</span>
        </label>
    </div>
</div>

attribute

...will be here soon