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((_) { }); }
<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>
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)
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect" data-mdl-click="handleButtonClick()">Click me!</button>
343 Precompiled (SCSS->CSS) Color-Themes for your application. All themes are based on Googles Material Design Color spec.
Nice templates as a quick-start for you
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
<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
Dorfstrasse 112, Westendorf 6363, Austria