import 'package:mdl/mdl.dart';

main() {
    final Logger _logger = new Logger('dialog.Main');
    registerMdl();
    componentFactory().run().then((_) {
        final MaterialButton btnNotification = MaterialButton.widget(dom.querySelector("#notification"));
        final MaterialTextfield title = MaterialTextfield.widget(dom.querySelector("#notification-title"));
        final MaterialTextfield subtitle = MaterialTextfield.widget(dom.querySelector("#notification-subtitle"));
        final MaterialTextfield content = MaterialTextfield.widget(dom.querySelector("#notification-content"));
        final MaterialRadioGroup notificationtype = MaterialRadioGroup.widget(dom.querySelector("#notification-type"));
        void _checkIfButtonShouldBeEnabled(_) { btnNotification.enabled = (title.value.isNotEmpty || content.value.isNotEmpty); }
        title.hub.onKeyUp.listen( _checkIfButtonShouldBeEnabled);
        content.hub.onKeyUp.listen( _checkIfButtonShouldBeEnabled);
        int counter = 0;
        btnNotification.onClick.listen( (_) {
            _logger.info("Click on Notification");
            NotificationType type = NotificationType.INFO;
            if(notificationtype.hasValue) {
                switch(notificationtype.value) {
                    case "debug":   type = NotificationType.DEBUG; break;
                    case "info":    type = NotificationType.INFO; break;
                    case "warning": type = NotificationType.WARNING; break;
                    case "error":   type = NotificationType.ERROR; break;
                    default: type = NotificationType.INFO;
                }
            }
            _logger.info("NT ${notificationtype.value} - ${notificationtype.hasValue}");
            final MaterialNotification notification = new MaterialNotification();
            final String titleToShow = title.value.isNotEmpty ? "${title.value} (#${counter})" : "";
            notification(content.value, type: type,title: titleToShow, subtitle: subtitle.value)
                .show().then((final MdlDialogStatus status) {
                _logger.info(status);
            });
            counter++;
        });
    });
}
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="form">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="notification-title"/>
            <label class="mdl-textfield__label" for="notification-title">Title</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="notification-subtitle" />
            <label class="mdl-textfield__label" for="notification-subtitle">Subtitle</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea class="mdl-textfield__input" type="text" rows="2" id="notification-content" ></textarea>
            <label class="mdl-textfield__label" for="notification-content">Content</label>
        </div>
        <div id="notification-type" class="mdl-radio-group">
            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-debug">
                <input type="radio" id="type-debug" class="mdl-radio__button" name="type[]" value="debug" />
                <span class="mdl-radio__label">Debug</span>
            </label>
            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-info">
                <input type="radio" id="type-info" class="mdl-radio__button" name="type[]" value="info" checked/>
                <span class="mdl-radio__label">Info</span>
            </label>
            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-warning">
                <input type="radio" id="type-warning" class="mdl-radio__button" name="type[]" value="warning" />
                <span class="mdl-radio__label">Warning</span>
            </label>
            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-error">
                <input type="radio" id="type-error" class="mdl-radio__button" name="type[]" value="error" />
                <span class="mdl-radio__label">Error</span>
            </label>
        </div>
        <button id="notification"
                class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" disabled>
            Add notification
        </button>
        <p class="info">
            Warning + Error have a delay of 10secs, Debug + Info have a delay of 6.5secs.
        </p>
    </div>
</div>

notification

...will be here soon