Core-list is a Polymer component designed for rendering a very large amount of elements in a list (thousands without any problem). It internally creates only those elements that are visible to the user and as they scroll, it positions them absolutely to users viewport with CSS3 transformations (the same transformations that we used in Chapter 4, Developing a Mobile App with Dart).

We'll create a new project, add polymer and core-elements dependencies and then create a custom element with our entire app that generates 1 million of random colors and render them into one large list:

// lib/main_app.dart
import 'dart:math';
import 'package:polymer/polymer.dart';

@CustomTag('main-app')
class MainApp extends PolymerElement {
  Random _rnd;
  
  // ObservableList is a Polymer class that emits events when
  // items in the list change. It's required by <core-list>.
  @observable ObservableList largeList = new ObservableList();

  MainApp.created() : super.created() {
    _rnd = new Random();
    for (int i = 0; i < pow(10, 6); i++) {
      largeList.add([getRandomColor()]);
    }
  }

  String getRandomColor() =>
      _colorComp() + _colorComp() + _colorComp();
  String _colorComp() =>
      _rnd.nextInt(256).toRadixString(16).padLeft(2, '0'),
}

Then write HTML template for our app. Polymer's <core-list> automatically generates index and model variables for us, which represent the current item's index and the current item itself respectively.

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import"
    href="../../packages/core_elements/core_list_dart.html">
<polymer-element name="main-app">
  <template>
    <style>
    #list { height: 100%; }
    #list div { padding: 3px; }
    </style>
  
    <core-list-dart id="list" data="{{largeList}}">
      <template>
        <div>
          <span>#{{index}}: </span>
          <span style="color:#{{model}}">Hello, World!</span>
        </div>
      </template>
    </core-list-dart>
  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

Polymer's <core-list> element replicates its inner <template> tag and interpolates all values in it. We can check which HTML elements core-list generated for us:

Although we're rendering a list with 1 million items, there are only about 40 div elements actually created and reused as you scroll (it also created div elements that are around your current viewport). Note that it doesn't wrap itself nor rendered items with Shadow DOM because that would prevent you from styling it with CSS. Core-list speeds up rendering large lists enormously and works on both desktop and mobile browsers.

Polymer.dart can offer even more. We're not able to cover everything here, so we have to leave it up to your curiosity, but we hope you have an idea what polymer.dart is good for, and in what kind of situations you can use it.

For a more comprehensive list of tutorials, check out the port of Polymer tutorials from JavaScript into Dart at https://github.com/dart-lang/polymer-dart-patterns and the official polymer.dart documentation at https://www.dartlang.org/polymer/.