Merge pull request #1737 from Hixie/spinning_mixed_port

Port spinning_mixed demo to fn3

examples/rendering/align_items.dart

@@ -4,7 +4,7 @@
 
 import 'package:flutter/rendering.dart';
 
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 void main() {
   var table = new RenderFlex(direction: FlexDirection.vertical);

examples/rendering/flex.dart

@@ -5,7 +5,7 @@
 import 'dart:ui' as ui;
 
 import 'package:flutter/rendering.dart';
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 RenderBox buildFlexExample() {
   RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical);

examples/rendering/interactive_flex.dart

@@ -8,7 +8,7 @@ import 'dart:math' as math;
 import 'package:flutter/services.dart';
 import 'package:flutter/rendering.dart';
 
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 class Touch {
   final double x;

examples/rendering/justify_content.dart

@@ -4,7 +4,7 @@
 
 import 'package:flutter/rendering.dart';
 
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 const TextStyle style = const TextStyle(color: const Color(0xFF000000));
 

examples/rendering/render_grid.dart

@@ -7,7 +7,7 @@ import 'dart:math' as math;
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 Color randomColor() {
   final List<Color> allColors = [

examples/rendering/render_paragraph.dart

@@ -4,7 +4,7 @@
 
 import 'package:flutter/rendering.dart';
 
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 void main() {
   RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical);

examples/rendering/spinning_flex.dart

@@ -7,7 +7,7 @@ import 'dart:ui' as ui;
 import 'package:flutter/animation.dart';
 import 'package:flutter/rendering.dart';
 
-import 'solid_color_box.dart';
+import 'lib/solid_color_box.dart';
 
 Duration timeBase;
 RenderTransform transformBox;

examples/widgets/spinning_mixed.dart

@@ -8,20 +8,21 @@ import 'package:flutter/animation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
-import '../rendering/solid_color_box.dart';
+import 'package:flutter_rendering_examples/solid_color_box.dart';
 
 // Solid colour, RenderObject version
 void addFlexChildSolidColor(RenderFlex parent, ui.Color backgroundColor, { int flex: 0 }) {
   RenderSolidColorBox child = new RenderSolidColorBox(backgroundColor);
   parent.add(child);
-  child.parentData.flex = flex;
+  FlexParentData childParentData = child.parentData;
+  childParentData.flex = flex;
 }
 
 // Solid colour, Widget version
-class Rectangle extends Component {
+class Rectangle extends StatelessComponent {
   Rectangle(this.color, { Key key }) : super(key: key);
   final Color color;
-  Widget build() {
+  Widget build(BuildContext context) {
     return new Flexible(
       child: new Container(
         decoration: new BoxDecoration(backgroundColor: color)
@@ -30,28 +31,42 @@ class Rectangle extends Component {
   }
 }
 
-Widget builder() {
-  return new Container(
-    height: 300.0,
-    child: new Column([
-        new Rectangle(const Color(0xFF00FFFF)),
-        new Container(
-          padding: new EdgeDims.all(10.0),
-          margin: new EdgeDims.all(10.0),
-          decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
-          child: new RaisedButton(
-            child: new Row([
-              new NetworkImage(src: "https://www.dartlang.org/logos/dart-logo.png"),
-              new Text('PRESS ME'),
-            ]),
-            onPressed: () => print("Hello World")
-          )
-        ),
-        new Rectangle(const Color(0xFFFFFF00)),
-      ],
-      justifyContent: FlexJustifyContent.spaceBetween
+double value;
+RenderObjectToWidgetElement<RenderBox> element;
+void attachWidgetTreeToRenderTree(RenderProxyBox container) {
+  element = new RenderObjectToWidgetAdapter<RenderBox>(
+    container: container,
+    child: new Container(
+      height: 300.0,
+      child: new Column(<Widget>[
+          new Rectangle(const Color(0xFF00FFFF)),
+          new Container(
+            padding: new EdgeDims.all(10.0),
+            margin: new EdgeDims.all(10.0),
+            decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
+            child: new Row(<Widget>[
+                new RaisedButton(
+                  child: new Row(<Widget>[
+                      new NetworkImage(src: "http://flutter.io/favicon.ico"),
+                      new Text('PRESS ME'),
+                    ]
+                  ),
+                  onPressed: () {
+                    value = value == null ? 0.1 : (value + 0.1) % 1.0;
+                    attachWidgetTreeToRenderTree(container);
+                  }
+                ),
+                new CircularProgressIndicator(value: value),
+              ],
+              justifyContent: FlexJustifyContent.spaceAround
+            )
+          ),
+          new Rectangle(const Color(0xFFFFFF00)),
+        ],
+        justifyContent: FlexJustifyContent.spaceBetween
+      )
     )
-  );
+  ).attachToRenderTree(element);
 }
 
 Duration timeBase;
@@ -69,16 +84,13 @@ void rotate(Duration timeStamp) {
 }
 
 void main() {
-  // Because we're going to use Widgets, we want to initialise its
-  // FlutterBinding, not use the default one. We don't really need to do
-  // this, because RenderBoxToWidgetAdapter does it for us, but
-  // it's good practice in case we happen to not have a
-  // RenderBoxToWidgetAdapter in our tree at startup, or in case we
-  // want a renderViewOverride.
-  WidgetFlutterBinding.initWidgetFlutterBinding();
+  // Because we're going to use Widgets, we want to ensure we're using a
+  // WidgetFlutterBinding rather than some other kind of binding (e.g. a
+  // straight rendering library FlutterBinding).
+  WidgetFlutterBinding.ensureInitialized();
 
   RenderProxyBox proxy = new RenderProxyBox();
-  new RenderBoxToWidgetAdapter(proxy, builder); // adds itself to proxy
+  attachWidgetTreeToRenderTree(proxy);
 
   RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical);
   addFlexChildSolidColor(flexRoot, const ui.Color(0xFFFF00FF), flex: 1);

sky/packages/sky/lib/src/widgets/binding.dart

@@ -11,8 +11,6 @@ class WidgetFlutterBinding extends FlutterBinding {
 
   WidgetFlutterBinding() {
     BuildableElement.scheduleBuildFor = scheduleBuildFor;
-    _renderViewElement = new RenderObjectToWidgetElement<RenderBox>(describeApp(null));
-    _renderViewElement.mount(null, null);
   }
 
   /// Ensures that there is a FlutterBinding object instantiated.
@@ -24,18 +22,6 @@ class WidgetFlutterBinding extends FlutterBinding {
 
   static WidgetFlutterBinding get instance => FlutterBinding.instance;
 
-  /// The [Element] that is at the root of the hierarchy (and which wraps the
-  /// [RenderView] object at the root of the rendering hierarchy).
-  Element get renderViewElement => _renderViewElement;
-  Element _renderViewElement;
-
-  RenderObjectToWidgetAdapter<RenderBox> describeApp(Widget app) {
-    return new RenderObjectToWidgetAdapter<RenderBox>(
-      container: instance.renderView,
-      child: app
-    );
-  }
-
   void beginFrame(Duration timeStamp) {
     buildDirtyElements();
     super.beginFrame(timeStamp);
@@ -78,15 +64,22 @@ class WidgetFlutterBinding extends FlutterBinding {
     }, building: true);
     assert(_dirtyElements.isEmpty);
   }
+
+  /// The [Element] that is at the root of the hierarchy (and which wraps the
+  /// [RenderView] object at the root of the rendering hierarchy).
+  Element get renderViewElement => _renderViewElement;
+  Element _renderViewElement;
+  void _runApp(Widget app) {
+    _renderViewElement = new RenderObjectToWidgetAdapter<RenderBox>(
+      container: renderView,
+      child: app
+    ).attachToRenderTree(_renderViewElement);
+  }
 }
 
 void runApp(Widget app) {
   WidgetFlutterBinding.ensureInitialized();
-  BuildableElement.lockState(() {
-    WidgetFlutterBinding.instance.renderViewElement.update(
-      WidgetFlutterBinding.instance.describeApp(app)
-    );
-  }, building: true);
+  WidgetFlutterBinding.instance._runApp(app);
 }
 
 void debugDumpApp() {
@@ -115,6 +108,18 @@ class RenderObjectToWidgetAdapter<T extends RenderObject> extends RenderObjectWi
   RenderObjectWithChildMixin<T> createRenderObject() => container;
 
   void updateRenderObject(RenderObject renderObject, RenderObjectWidget oldWidget) { }
+
+  RenderObjectToWidgetElement<T> attachToRenderTree([RenderObjectToWidgetElement<T> element]) {
+    BuildableElement.lockState(() {
+      if (element == null) {
+        element = createElement();
+        element.mount(null, null);
+      } else {
+        element.update(this);
+      }
+    }, building: true);
+    return element;
+  }
 }
 
 /// This element class is the instantiation of a [RenderObjectToWidgetAdapter].