How to use built-in css color classes of material design in Polymer.dart?

Issue

I am trying to test and port one of the official neon-animation example from JS to Dart.

This is the original js demo and js source,
and this is my implemented Dart demo and Dart source

2 problems encountered:

1. in JS version, the color of div is assigned with class, ex: class=”card green-300″, green-300 shows a material color, and the same way is not working in Dart version, so what is the approach in Dart to assign a built-in material design color with css class?

   html:

   <div id="[[index]]" class="card green-300" on-tap="onTapped">
      <span>[[item.value]]</span>
   </div>
   

2. All layout is defined in html, so the result is supposed to be the same. But in my Dart version the layout is broken. Maybe some additional settings is needed?

   result of js:
   

   result of dart:
   

–updated 2016.05.24–

Problem 1 is solved. 

As Günter Zöchbauer indicated, I forgot to import html that contains those handwritten & pre-defined css color classes. I guess we just have to enumerate all colors and pre-defined those css classes somewhere. Thanks Günter.

Problem 2 is about solved. 

It is strange that the same content built by polymer.js works correctly on chrome v50 & v51, but polymer.dart’s only works on chrome v51.

Solution

Change display: block of <grid-view> to display: flex makes it look like your first screenshot.

Answered By – Günter Zöchbauer

Answer Checked By – Mary Flores (FlutterFixes Volunteer)