material2_dart 0.4.4

  • Installing
  • Versions
  • 67

This is the Dart version of angular/material2 being ported by individual.



You may be looking for the official Material Design components for AngularDart?

Project Status

Synced with the 2.0.0-alpha.9 except gesture support and non 'available' components.

Demo app.

This is the e2e example app which includes all of the components and core functions usages.



  1. Add this to your package's pubspec.yaml file. (The example)

  2. Run pub get.

  3. Import this library as import 'package:material2_dart:material.dart'. (The example)


Your contribution is welcome. Please note that this project is nothing more than a porting work of angular/material2.

Many tests have not been ported, so it is much appreciated if you help to port them.

Features and bugs

I would not add any original features on it. If you need some new features, please consider contributing angular/material2.

If you find this Dart version's specific bugs, please file them at the issue tracker.

Testing material2_dart.

Run test server on the project root.

pub serve

Run tests on dartium.

pub run test --pub-serve=8080 -p dartium


Fix several regressions on 0.4.3.


Remove Renderer to support Angular2 2.1.0 or higher.


Relax dependent package's constraint.


Upgrade angular2 dep to ^2.0.0.


Bundle pre compiled css and source map files so that users don't need to compile this package's sass files in transformer phase.

Remove package:scissors dependency.

The e2e example has moved to the independent repository ( to be more practical working example without relative path package dependencies.


Sync with the alpha.9 only for "Available" components.

(breaking): Changed the package layout to follow the convention. import 'package:material2_dart/material.dart'; to import the all components and core functions.


Sync with the alpha.8 only for "Available" components.

  • Port Async tabs demo.
  • Port button toggle component.
  • Port Slider component.


  • Upgrade Angular to beta.21.
  • Upgrade related packages and SDK constraints.
  • Add a large number of analysis options for stricter type checking and better code style.
  • Upgrade tests for angular beta.21.
  • Also Upgrade demo.

Bug fixes.

Fix MdAnchor disabled didn't work.


All porting works have done for the current target (anuglar/material2 6/15/2016).

  • Port progress bar and its demo. (Without test code.)
  • Port progress circle and its demo. (Without test code.)
  • Port ally and its demo. (Without test code.)
  • Port overlay and its demo. (Without test code.)
  • Port portal demo.
  • Port baseline demo.
  • Relax the package version constraints.


  • Move from sass to scissors again in order to fix many build errors.
  • Move demo_app from weird web/ directory to example/ directory to follow the package convention.
  • Confirm this package does not introduce any build errors now.
  • Add prerequisites and improve usage on README.


  • Port slide toggle and its demo. (Without test code.)
  • Port radio and its demo. (Without test code.)
  • Port grid list and its demo. (Without test code.)
  • Rewrite README.


  • Port checkbox. (Without enough test code.)
  • Port input. (Without enough test code.)
  • Port checkbox demo.
  • Port input demo.
  • Port tabs demo with a bug fix. Caution: async tabs doesn't work. See issues/30.
  • Add a side nave link for issues/29.


  • Port list demo.
  • Port toolbar demo with bug fixes.
  • Port sidenav demo with its bug fixes.


  • Update existing code to original angular/material2's 497a3c1 (6/15/2016).
  • Port card demo.
  • Port icon demo with bug fixes.
  • Port tabs.


  • Fix md-card didn't work.
  • Improve demo app code with sidenav, list, toolbar, button, icon. And add complete button demo (still have some problems).
  • Instead of scissors package which requires sassc, adopt sass package for easier setup.


  • Add card.


  • Experimentally enable strong-mode.


  • Add list.


  • Add sidenav, toolbar, and icon.


  • Initial version, with MdButton and the demo app.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  material2_dart: "^0.4.4"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:material2_dart/material.dart';
Version Uploaded Documentation Archive
0.4.4 Dec 22, 2016 Go to the documentation of material2_dart 0.4.4 Download material2_dart 0.4.4 archive
0.4.3 Dec 14, 2016 Go to the documentation of material2_dart 0.4.3 Download material2_dart 0.4.3 archive
0.4.2 Nov 7, 2016 Go to the documentation of material2_dart 0.4.2 Download material2_dart 0.4.2 archive
0.4.1 Nov 3, 2016 Go to the documentation of material2_dart 0.4.1 Download material2_dart 0.4.1 archive
0.4.0 Oct 20, 2016 Go to the documentation of material2_dart 0.4.0 Download material2_dart 0.4.0 archive
0.3.0 Sep 28, 2016 Go to the documentation of material2_dart 0.3.0 Download material2_dart 0.3.0 archive
0.2.0 Sep 28, 2016 Go to the documentation of material2_dart 0.2.0 Download material2_dart 0.2.0 archive
0.1.1 Sep 13, 2016 Go to the documentation of material2_dart 0.1.1 Download material2_dart 0.1.1 archive
0.1.0 Jun 25, 2016 Go to the documentation of material2_dart 0.1.0 Download material2_dart 0.1.0 archive
0.0.11 Jun 23, 2016 Go to the documentation of material2_dart 0.0.11 Download material2_dart 0.0.11 archive

All 19 versions...


We analyzed this package on Jun 12, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.60.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
56 / 100
Code health derived from static analysis. [more]
96 / 100
Reflects how tidy and up-to-date the package is. [more]
51 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Platform components identified in package: html.


  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 5 errors 20 hints.

    Strong-mode analysis of lib/src/components/sidenav/sidenav.dart failed with the following error:

    line: 256 col: 45
    The function expression type '(Null) → void' isn't of type '(dynamic) → void'. This means its parameter or return type does not match what is expected. Consider changing parameter type(s) or the returned type(s).

    Strong-mode analysis of lib/src/core/portal/dom_portal_host.dart failed with the following error:

    line: 37 col: 18
    The argument type '(Node) → Node' can't be assigned to the parameter type '(dynamic) → void'.

    Similar analysis of the following files failed:

    • lib/src/core/portal/portal_directives.dart (error)
    • lib/material.dart (hint)
    • lib/src/components/grid_list/tile_coordinator.dart (hint)
    • lib/src/components/grid_list/tile_styler.dart (hint)
    • lib/src/components/icon/icon_registry.dart (hint)
    • lib/src/components/progress_circle/progress_circle.dart (hint)
    • lib/src/core/a11y/interactivity_checker.dart (hint)
    • lib/src/core/core.dart (hint)
    • lib/src/core/overlay/overlay_directives.dart (hint)
    • lib/src/core/overlay/overlay_ref.dart (hint)
    • lib/src/core/overlay/position/connected_position_strategy.dart (hint)
    • lib/src/core/overlay/position/viewport_ruler.dart (hint)
    • lib/src/core/ripple/ripple.dart (hint)
    • lib/src/core/ripple/ripple_renderer.dart (hint)
  • Package is getting outdated.

    The package was released 76 weeks ago.

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use material2_dart.dart.

  • Use analysis_options.yaml.

    Rename old .analysis_options file to analysis_options.yaml.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.1 <2.0.0
angular2 ^2.2.0 2.2.0 3.1.0+1
http >=0.11.0 <0.12.0 0.11.3+16
quiver >=0.21.4 <0.25.0 0.24.0 0.29.0+1
stack_trace ^1.6.5 1.9.2
stream_transformers >=0.3.0 <0.4.0 0.3.0+3
Transitive dependencies
analyzer 0.29.5 0.32.1
args 0.13.7 1.4.3
async 1.13.3 2.0.7
barback 0.15.2+16
charcode 1.1.1
cli_util 0.1.3
code_transformers 0.5.1+5
collection 1.14.10
convert 2.0.1
crypto 2.0.3
csslib 0.14.4
dart_style 0.2.16 1.0.14
fixnum 0.10.7
glob 1.1.5
html 0.13.3+1
http_parser 3.1.2
intl 0.14.0 0.15.6
isolate 0.2.3 2.0.1
js 0.6.1
logging 0.11.3+1
matcher 0.12.2+1
meta 1.1.5
mime 0.9.6+1
observable 0.14.0+1 0.22.1+3
package_config 1.0.3
path 1.6.0
plugin 0.2.0+2
pool 1.3.5
protobuf 0.5.5 0.9.0
shelf 0.6.8 0.7.3+1
shelf_static 0.2.7+1
source_maps 0.10.5
source_span 1.4.0
stream_channel 1.6.7
string_scanner 1.0.2
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+8
yaml 2.1.14
Dev dependencies
browser ^0.10.0
build >=0.3.0 <0.6.0 0.5.0 0.12.6
test >=0.12.0 <0.13.0