Scrolling list changes lead to graphical glitches #159

// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:sky/widgets.dart';

class Circle extends Component {
  Circle(this.color);

  final Color color;

  Widget build() {
    return new Container(
      decoration: new BoxDecoration(
        shape: Shape.circle,
        backgroundColor: color
      )
    );
  }
}

List<Color> colors = [
  const Color(0x0F00FF00),
  const Color(0xCF00FF00),
  const Color(0x1F00FF00),
  const Color(0xBF00FF00),
  const Color(0xAF00FF00),
  const Color(0x9F00FF00),
  const Color(0x3F00FF00),
  const Color(0x8F00FF00),
  const Color(0x4F00FF00),
  const Color(0x7F00FF00),
  const Color(0x5F00FF00),
  const Color(0x6F00FF00)
];

class ScrollingApp extends App {
  bool shouldSort = false;

  Widget build() {
    List<Color> sortedColors = new List<Color>.from(colors);
    if (shouldSort) {
      sortedColors.sort((a, b) => a.alpha.compareTo(b.alpha));
    }
    List<Widget> circles = [];
    for(Color color in sortedColors) {
      circles.add(new Circle(color));
    }
    for(int i = 0; i < colors.length; i++)
    return new Column([
      new Container(
        height: 300.0,
        child: new ScrollableViewport(
          // key: new GlobalKey(),
          child: new Grid(
            circles,
            maxChildExtent: 150.0
          )
        )
      ),
      new Flexible(
        child: new Center(
          child: new RaisedButton(
            child: new Text("Toggle sorting"),
            onPressed: () => setState(() => shouldSort = !shouldSort)
          )
        )
      )
    ]);
  }
}

void main() {
  runApp(new ScrollingApp());
}