import 'package:mdl/mdl.dart';

main() {
    final Logger _logger = new Logger('dialog.Main');
    registerMdl();
    componentFactory().run().then((_) {
        final MaterialButton btnToast = MaterialButton.widget(dom.querySelector("#toast"));
        final MaterialButton btnWithAction = MaterialButton.widget(dom.querySelector("#withAction"));
        final MaterialToast toast = new MaterialToast();
        int mangoCounter = 0;
        void _makeSettings() {
            toast.position.left = MaterialCheckbox.widget(dom.querySelector("#checkbox-left")).checked;
            toast.position.top = MaterialCheckbox.widget(dom.querySelector("#checkbox-top")).checked;
            toast.position.right = MaterialCheckbox.widget(dom.querySelector("#checkbox-right")).checked;
            toast.position.bottom = MaterialCheckbox.widget(dom.querySelector("#checkbox-bottom")).checked;
            dom.querySelector("#container").classes.toggle("mdl-toast-container",
            MaterialCheckbox.widget(dom.querySelector("#checkbox-use-container")).checked);
        }
        btnToast.onClick.listen( (_) {
            _logger.info("Click on Toast");
            _makeSettings();
            toast("Toast message").show().then((final MdlDialogStatus status) {
                _logger.info(status);
            });
        });
        btnWithAction.onClick.listen( (_) {
            _logger.info("Click on withAction");
            _makeSettings();
            toast("Toast message",confirmButton: "OK").show().then((final MdlDialogStatus status) {
                _logger.info(status);
            });
        });

    });
}
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="demo-button">
        <button id="toast" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
            Toast
        </button>
        <button id="withAction" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
            with Action
        </button>
    </div>
    <h6>Toast Postition</h6>
    <div class="position">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-top">
            <input type="checkbox" id="checkbox-top" class="mdl-checkbox__input" />
            <span class="mdl-checkbox__label">top</span>
        </label>
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-left">
            <input type="checkbox" id="checkbox-left" class="mdl-checkbox__input" />
            <span class="mdl-checkbox__label">left</span>
        </label>
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-right">
            <input type="checkbox" id="checkbox-right" class="mdl-checkbox__input" />
            <span class="mdl-checkbox__label">right</span>
        </label>
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-bottom">
            <input type="checkbox" id="checkbox-bottom" class="mdl-checkbox__input" />
            <span class="mdl-checkbox__label">bottom</span>
        </label>
    </div>
    <div id="container" class="container">Container</div>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-use-container">
        <input type="checkbox" id="checkbox-use-container" class="mdl-checkbox__input" />
        <span class="mdl-checkbox__label">use container</span>
    </label>
</div>

toast

...will be here soon