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 MaterialSnackbar snackbar = new MaterialSnackbar();
        int mangoCounter = 0;
        void _makeSettings() {
            snackbar.position.left = MaterialCheckbox.widget(dom.querySelector("#checkbox-left")).checked;
            snackbar.position.top = MaterialCheckbox.widget(dom.querySelector("#checkbox-top")).checked;
            snackbar.position.right = MaterialCheckbox.widget(dom.querySelector("#checkbox-right")).checked;
            snackbar.position.bottom = MaterialCheckbox.widget(dom.querySelector("#checkbox-bottom")).checked;
            dom.querySelector("#container").classes.toggle("mdl-snackbar-container",
            MaterialCheckbox.widget(dom.querySelector("#checkbox-use-container")).checked);
        }
        btnToast.onClick.listen( (_) {
            _logger.info("Click on Toast");
            _makeSettings();
            snackbar("Toast message").show().then((final MdlDialogStatus status) {
                _logger.info(status);
            });
        });
        btnWithAction.onClick.listen( (_) {
            _logger.info("Click on withAction");
            _makeSettings();
            snackbar("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">
            Snackbar
        </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>Position</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>

snackbar

...will be here soon