Port overlay_geometry.dart demo.

This removes GlobalKey.currentElement in favour of GlobalKey.currentContext.

examples/widgets/overlay_geometry.dart

@@ -15,16 +15,18 @@ class CardModel {
   Color color;
   String get label => "Card $value";
   Key get key => new ObjectKey(this);
+  GlobalKey get targetKey => new GlobalObjectKey(this);
 }
 
 enum MarkerType { topLeft, bottomRight, touch }
 
-class Marker extends Component {
+class Marker extends StatelessComponent {
   Marker({
     this.type: MarkerType.touch,
     this.position,
     this.size: 40.0,
-    Key key }) : super(key: key);
+    Key key
+  }) : super(key: key);
 
   final Point position;
   final double size;
@@ -49,7 +51,7 @@ class Marker extends Component {
     }
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     return new Positioned(
       left: position.x - size / 2.0,
       top: position.y - size / 2.0,
@@ -64,18 +66,22 @@ class Marker extends Component {
   }
 }
 
-class OverlayGeometryApp extends App {
+class OverlayGeometryApp extends StatefulComponent {
+  OverlayGeometryAppState createState() => new OverlayGeometryAppState();
+}
+
+class OverlayGeometryAppState extends State<OverlayGeometryApp> {
 
   static const TextStyle cardLabelStyle =
     const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
 
   List<CardModel> cardModels;
-  MixedViewportLayoutState layoutState = new MixedViewportLayoutState();
   Map<MarkerType, Point> markers = new Map<MarkerType, Point>();
   double markersScrollOffset;
   ScrollListener scrollListener;
 
   void initState() {
+    super.initState();
     List<double> cardHeights = <double>[
       48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
       48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
@@ -85,13 +91,12 @@ class OverlayGeometryApp extends App {
       Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardHeights.length);
       return new CardModel(i, cardHeights[i], color);
     });
-    super.initState();
   }
 
-  void handleScroll(Scrollable scrollable) {
+  void handleScroll(double offset) {
     setState(() {
-      double dy = markersScrollOffset - scrollable.scrollOffset;
+      double dy = markersScrollOffset - offset;
-      markersScrollOffset = scrollable.scrollOffset;
+      markersScrollOffset = offset;
       for (MarkerType type in markers.keys) {
         Point oldPosition = markers[type];
         markers[type] = new Point(oldPosition.x, oldPosition.y + dy);
@@ -99,77 +104,68 @@ class OverlayGeometryApp extends App {
     });
   }
 
-  void handlePointerDown(Widget target, sky.PointerEvent event) {
+  void handlePointerDown(GlobalKey target, sky.PointerEvent event) {
     setState(() {
       markers[MarkerType.touch] = new Point(event.x, event.y);
-      markers[MarkerType.topLeft] = target.localToGlobal(new Point(0.0, 0.0));
+      final RenderBox box = target.currentContext.findRenderObject();
-      Size size = (target.renderObject as RenderBox).size;
+      markers[MarkerType.topLeft] = box.localToGlobal(new Point(0.0, 0.0));
-      markers[MarkerType.bottomRight] = target.localToGlobal(new Point(size.width, size.height));
+      final Size size = box.size;
-
+      markers[MarkerType.bottomRight] = box.localToGlobal(new Point(size.width, size.height));
-      Scrollable scrollable = findScrollableAncestor(target: target);
+      final ScrollableState scrollable = findScrollableAncestor(target.currentContext);
       markersScrollOffset = scrollable.scrollOffset;
-      if (scrollListener == null) {
-        scrollListener = () { handleScroll(scrollable); };
-        scrollable.addListener(scrollListener);
-      }
     });
   }
 
-  Widget builder(int index) {
+  Widget builder(BuildContext context, int index) {
     if (index >= cardModels.length)
       return null;
     CardModel cardModel = cardModels[index];
-    Widget card = new Card(
-      color: cardModel.color,
-      child: new Container(
-        height: cardModel.height,
-        padding: const EdgeDims.all(8.0),
-        child: new Center(child: new Text(cardModel.label, style: cardLabelStyle))
-      )
-    );
     return new Listener(
       key: cardModel.key,
-      onPointerDown: (e) { return handlePointerDown(card, e); },
+      onPointerDown: (e) { return handlePointerDown(cardModel.targetKey, e); },
-      child: card
+      child: new Card(
+        key: cardModel.targetKey,
+        color: cardModel.color,
+        child: new Container(
+          height: cardModel.height,
+          padding: const EdgeDims.all(8.0),
+          child: new Center(child: new Text(cardModel.label, style: cardLabelStyle))
+        )
+      )
     );
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
-    Scrollable scrollable = new ScrollableMixedWidgetList(
-      builder: builder,
-      token: cardModels.length,
-      layoutState: layoutState
-    );
-
-    Widget cardCollection = new Container(
-      padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
-      decoration: new BoxDecoration(backgroundColor: Theme.of(this).primarySwatch[50]),
-      child: scrollable
-    );
-
     List<Widget> layers = <Widget>[
       new Scaffold(
         toolbar: new ToolBar(center: new Text('Tap a Card')),
-        body: cardCollection
+        body: new Container(
+          padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
+          decoration: new BoxDecoration(backgroundColor: Theme.of(context).primarySwatch[50]),
+          child: new ScrollableMixedWidgetList(
+            builder: builder,
+            token: cardModels.length,
+            onScroll: handleScroll
+          )
+        )
       )
     ];
     for (MarkerType type in markers.keys)
       layers.add(new Marker(type: type, position: markers[type]));
-
+    return new Stack(layers);
-    return new IconTheme(
-      data: const IconThemeData(color: IconThemeColor.white),
-      child: new Theme(
-        data: new ThemeData(
-          brightness: ThemeBrightness.light,
-          primarySwatch: Colors.blue,
-          accentColor: Colors.redAccent[200]
-        ),
-        child: new Title(title: 'Cards', child: new Stack(layers))
-      )
-    );
   }
 }
 
 void main() {
-  runApp(new OverlayGeometryApp());
+  runApp(new App(
+    theme: new ThemeData(
+      brightness: ThemeBrightness.light,
+      primarySwatch: Colors.blue,
+      accentColor: Colors.redAccent[200]
+    ),
+    title: 'Cards',
+    routes: {
+      '/': (navigator, route) => new OverlayGeometryApp()
+    }
+  ));
 }

packages/flutter/lib/src/widgets/framework.dart

@@ -92,10 +92,10 @@ abstract class GlobalKey extends Key {
     }
   }
 
-  Element get currentElement => _registry[this];
+  BuildContext get currentContext => _registry[this];
-  Widget get currentWidget => currentElement?.widget;
+  Widget get currentWidget => _registry[this]?.widget;
   State get currentState {
-    Element element = currentElement;
+    Element element = _registry[this];
     if (element is StatefulComponentElement)
       return element.state;
     return null;
@@ -414,7 +414,6 @@ typedef void ElementVisitor(Element element);
 abstract class BuildContext {
   InheritedWidget inheritedWidgetOfType(Type targetType);
   RenderObject findRenderObject();
-
   void visitAncestorElements(bool visitor(Element element));
 }
 

packages/flutter/lib/src/widgets/mixed_viewport.dart

@@ -487,7 +487,7 @@ class MixedViewportElement extends RenderObjectElement<MixedViewport> {
     assert(haveChildren != null);
     assert(haveChildren || _didReachLastChild || endOffset < 0.0);
     assert(startIndex >= 0);
-    assert(startIndex < _childExtents.length);
+    assert(!haveChildren || startIndex < _childExtents.length);
 
     // Build the other widgets that are visible.
     int index = startIndex;