• 5.0 Lollipop
  • 4.4 KitKat
  • 4.3 Jelly Bean
  • Android History

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

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 SCCS, is prefixed 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 think so.
    All you get is a bloated HTML-Header.
    In MDL/Dart you have your HTML with your components and you have your main.dart
    where you include all the necessary libs. 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 samples uses the mdl-draggable tag
    as basis for the <Component: - it's up to you!
    MaterialObserver uses an an attribute as basis
  • check Easy to use public component functions
  • check Routing is included!
    Styleguide (www.material-design-lite.pub) uses all these SPA features like routing and view-includes.
  • 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

About Us

Who we are

Pellentesque sapien purus, sagittis eu accumsan convallis, vehicula ut lectus. Fusce accumsan purus pretium ligula vehicula, ut interdum nisl vulputate. Vivamus ultrices luctus quam eu feugiat. Nunc sagittis odio eget odio laoreet mollis. Nullam rutrum blandit convallis. Maecenas id nisi eget nunc convallis consectetur nec sed nibh. Mauris in gravida

Pellentesque sapien purus, sagittis eu accumsan convallis, vehicula ut lectus. Fusce accumsan purus pretium ligula vehicula Sed justo sapien, ultrices non rutrum in, condimentum non sem. Aliquam finibus condimentum tellus, vel viverra est gravida ut. Duis vestibulum lorem et eros fermentum tristique penatibus et magnis dis parturient montes

Nullam rutrum blandit convallis. Maecenas id nisi eget nunc convallis consectetur nec sed nibh. Mauris in gravida. Aliquam varius fringilla imperdiet. Etiam mollis est sit amet risus congue aliquam penatibus et magnis dis parturient montes feugiat

Pellentesque sapien purus, sagittis eu accumsan convallis, vehicula ut lectus. Fusce accumsan purus pretium ligula vehicula, ut interdum nisl vulputate ultrices luctus quam eu feugiat. Nunc sagittis odio eget odio laoreet mollis Pellentesque sapien purus, sagittis eu accumsan convallis, vehicula ut lectus. Fusce accumsan purus pretium ligula vehicula Duis vestibulum lorem et eros fermentum tristique

about-image
about-image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

OUR FEATURES

HOW WE DO IT

grade

Responsive Design

Proin a velit aliquam vitae malesuada rutrum. Aenean ullamcorper placerat porttitor velit aliquam vitae. Aliquam a augue suscipit, bibendum luctus neque laoreet rhoncus ipsum, ullamcorper ullamcorper placerat

grade

Responsive Design

Proin a velit aliquam vitae malesuada rutrum. Aenean ullamcorper placerat porttitor velit aliquam vitae. Aliquam a augue suscipit, bibendum luctus neque laoreet rhoncus ipsum, ullamcorper ullamcorper placerat

grade

Responsive Design

Proin a velit aliquam vitae malesuada rutrum. Aenean ullamcorper placerat porttitor velit aliquam vitae. Aliquam a augue suscipit, bibendum luctus neque laoreet rhoncus ipsum, ullamcorper ullamcorper placerat

grade

Responsive Design

Proin a velit aliquam vitae malesuada rutrum. Aenean ullamcorper placerat porttitor velit aliquam vitae. Aliquam a augue suscipit, bibendum luctus neque laoreet rhoncus ipsum, ullamcorper ullamcorper placerat

OUR table

HOW WE DO IT

Description
MDL/Dart
MDL/JS
Feature 1
check
FAIL
More from Android

Get going on Android

Four tips to make your switch to Android quick and easy

Create your own Android character

Turn the little green Android mascot into you, your friends, anyone!

Get a clean customisable home screen

A clean, simple, customisable home screen that comes with the power of Google Now: Traffic alerts, weather and much more, just a swipe away.

Millions to choose from

Hail a taxi, find a recipe, run through a temple – Google Play has all the apps and games that let you make your Android device uniquely yours.