Material Design Lite / Dart

Lite weight + 'batteries included'

Material Design Lite for Dart (MDL/Dart) is a library of components for web developers based on Google's Material Design philosophy.
In Dart - for Dart, for you!

import 'package:mdl/mdl.dart';

main() {
    registerMdl();
    componentFactory().run().then((_) {
    });
}
intro-image
<button class="mdl-button">Flat</button>
<button class="mdl-button mdl-button--raised">
    Raised
</button>
<button class="mdl-button mdl-button--fab ">
    <i class="material-icons">add</i>
</button>
<button class="mdl-button mdl-button--icon ">
    <i class="material-icons">create</i>
</button>

The problem

Why you should use MDL/Dart

  • warning There is no "pure" Dart UI Library
  • warning Polymer is written in JS, Polymer.Dart is "just" a wrapper
  • warning Angular is written in Typescript - slows down development
  • warning Both, Polymer.Dart and Angular.Dart are huge, slow and hard to debug
It's always the same - the more calls a lib has to make until it gets a result, the slower it becomes.

  • check MDL/Dart is written in pure Dart.
    The styling-part is written in SCSS, prefixed (mdl-) and easy to use.
  • check MDL/Dart-Code is easy to read.
    The component-registration has about 55 lines of code.
    More on GitHub
  • check DI (Dependency Injection)
    You can use it but you don't have to.
    If you like DI it's easy to implement e.g. a MessageBus for your components.
  • check No HTML-Imports
    Google says HTML-Imports are a feature - I don't agree.
    All you get is a bloated HTML-Header.
    In MDL/Dart you have your HTML with your components and your main.dart where you define all the necessary imports - that's it!
  • check You can use classes, attributes or tags as your component
    (Not supported in MDL/JS)
    E.g. MaterialCheckbox uses mdl-js-checkbox for the Component-Registration
    The D&D sample uses the mdl-draggable tag
    as basis for the Component: - it's up to you!
    MaterialObserver uses an attribute as basis
  • check Easy to use public component functions
  • check Routing is included!
    The Styleguide uses all the SPA (SinglePageApplication) features like routing, dependency-injection or dynamic-content (dynamic views)
  • check Theming
    Sure Polymer has theming but with it's encapsulation approach
    it's more a pain then it helps.
    Here are the SCSS-Themes: GitHub
about-image

THE FEATURES

HOW WE DO IT

loyalty

Lightweight

MDL/Dart ist lightweight! material.min.css has about 170KB and main.dart.js for styleguide with all it's views, samples aso. has ~700KB.
The styleguide-sample takes about 500ms (cached-version) and about 900ms if cache is disabled!
(Pagespeed turned on)

redeem

Full featured framework. The following "batteries" are included:

now_widgets

Components ready to use

  • 16 base components designed / confirmed by Googles Material Design Team like MaterialButton, MaterialCheckbox, MaterialLayout, MaterialTabs aso.
  • 4 different dialogs like AlertDialog, ConfirmDialog, Notification-Messages and Snackbar
  • Directives for easy data-binding
  • Drag and Drop
  • Formatters to format the "observer" output directly from your HTML
  • Mustache-Based-Components (Template-Based)
    E.g. define your event-handler in HTML:
    <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
                                                                                  data-mdl-click="handleButtonClick()">Click me!</button>
  • You are not tied to css-class-based components. Choose weither your own componentd should be class-bases, attribute-based or tag-based! (GitHub)
color_lens

Theming

343 Precompiled (SCSS->CSS) Color-Themes for your application. All themes are based on Googles Material Design Color spec.

view_quilt

Templates

Nice templates as a quick-start for you

Getting started

Let's do it!

gettingstarted-image

In your pubspec.yaml specify `mdl`, `browser` and `di` packages as dependencies, as well as the `di` transformer.

dependencies:
  mdl: "^1.0.0"
  browser: '^0.10.0'
  di: "^3.3.4"
transformers:
  - di

Add the mdl style sheet to your `index.html`
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
Initialize the mdl library from your main.dart
import 'package:mdl/mdl.dart' as mdl;

main() async {
  mdl.registerMdl();
  await mdl.componentFactory().run();
}
pub update and you are done!

MDL/Dart comes with StageDive support! Try it out and follow these steps:

# if you don't have mdl installed
pub cache add mdl

# if you don't have stagedive installed or if you want to update stagedive
pub global activate stagedive

# if you don't have sitegen installed or if you want to update sitegen
# sitegen - will later act as a local server
pub global activate sitegen

stagedive -l

# You should see something like this

#   'MDL Android Template'         Package: mdl          Template name: android        Version: 1.x
#   'MDL Android Template'         Package: mdl          Template name: android        Version: 1.x
#   'MDL Article Template'         Package: mdl          Template name: article        Version: 1.x
#   'MDL Android Template'         Package: mdl          Template name: blog           Version: 1.x
#   'MDL Blog Template'            Package: mdl          Template name: dashboard      Version: 1.x
#   'MDL Fixed-Header Template'    Package: mdl          Template name: fixed-header   Version: 1.x
#   'MDL Sample Template'          Package: mdl          Template name: sample         Version: 1.x
#   'MDL Sticky-Footer Template'   Package: mdl          Template name: sticky-footer  Version: 1.x
#   'MDL Text-Only Template'       Package: mdl          Template name: text-only      Version: 1.x

# Now lets generate a new (-n) folder: android
stagedive -n android -p mdl -t android

# This is what stagedive asks you
#   Your email address: office@mikemitterer
#   Your name: Mike
#   Enter the package-name: android_mdl
#
#   'MDL Android Template' created! (android)

# move the newly created dir
cd android

# Update everything
pub update

# Serve the site (you are in 'android'-folder!)
sitegen -x

# In Chromium/Dartium
localhost:8000

Download simple.zip
Unzip the downloaded file
cd simple
pub update
sitegen -x (If you are using sitegen)
Done! - with localhost:8000 you should see the created sample-page

Resources

Check it out

Contact

How you reach us

place

Office Location

Dorfstrasse 112, Westendorf 6363, Austria

email

Email Address

office@mikemitterer.at
bug_report

Issue reports

GitHub