WIP Flexbox Layout Manager for Sky framework.

sky/examples/raw/simple_render_tree.dart

 // 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 'dart:math';
 import 'dart:sky';
 import 'package:sky/framework/layout2.dart';
 
 class RenderSolidColor extends RenderDecoratedBox {
+  final double desiredHeight;
+  final double desiredWidth;
   final int backgroundColor;
 
-  RenderSolidColor(int backgroundColor)
-      : super(new BoxDecoration(backgroundColor: backgroundColor)),
-        backgroundColor = backgroundColor;
+  RenderSolidColor(int backgroundColor, { double desiredHeight: double.INFINITY,
+                                          double desiredWidth: double.INFINITY })
+      : desiredHeight = desiredHeight,

[sethladd, 2015/05/23 03:14:10]

Did you consider using this. in your constructor? It can eliminate some
boilerplate.

For example:

RenderSolidColor(int backgroundColor, {this.desiredHeight: double.INFINITY})
  : super(new BoxDecoration(backgroundColor: backgroundColor));

[jackson, 2015/05/23 03:47:43]

Good call, I'll fix that. I'm new to Dart, as you can probably guess. :)

+        desiredWidth = desiredWidth,
+        backgroundColor = backgroundColor,
+        super(new BoxDecoration(backgroundColor: backgroundColor));
 
   BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
-    return new BoxDimensions.withConstraints(constraints, height: 200.0);
+    return new BoxDimensions.withConstraints(constraints,
+                                             height: desiredHeight,
+                                             width: desiredWidth);
   }
 
   void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
-    width = constraints.constrainWidth(constraints.maxWidth);
-    height = constraints.constrainHeight(200.0);
+    width = constraints.constrainWidth(desiredWidth);
+    height = constraints.constrainHeight(desiredHeight);
     layoutDone();
   }
 
   bool handlePointer(PointerEvent event, { double x: 0.0, double y: 0.0 }) {
     if (event.type == 'pointerdown') {
       setBoxDecoration(new BoxDecoration(backgroundColor: 0xFFFF0000));
       return true;
     }
 
     if (event.type == 'pointerup') {
@@ skipping 16 matching lines @@
 bool handleEvent(Event event) {
   if (event is! PointerEvent)
     return false;
   return renderView.handlePointer(event, x: event.x, y: event.y);
 }
 
 void main() {
   view.setEventCallback(handleEvent);
   view.setBeginFrameCallback(beginFrame);
 
-  var root = new RenderBlock(
-      decoration: new BoxDecoration(backgroundColor: 0xFF00FFFF),
+  var root = new RenderFlex(
+      direction: FlexDirection.Vertical,
+      decoration: new BoxDecoration(backgroundColor: 0xFF000000));
+
+  void addFlexChild(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
+    RenderNode child = new RenderSolidColor(backgroundColor);
+    parent.add(child);
+    child.parentData.flex = flex;
+  }
+
+  // Yellow bar at top
+  addFlexChild(root, 0xFFFFFF00, flex: 1);
+
+  // Turquoise box
+  root.add(new RenderSolidColor(0x7700FFFF, desiredHeight: 100.0, desiredWidth: 100.0));
+
+  // Green and cyan render block with padding
+  var renderBlock = new RenderBlock(
+      decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
       padding: const EdgeDims(10.0, 10.0, 10.0, 10.0));
 
-  root.add(new RenderSolidColor(0xFF00FF00));
-  root.add(new RenderSolidColor(0xFF0000FF));
+  renderBlock.add(new RenderSolidColor(0xFF00FF00, desiredHeight: 50.0, desiredWidth: 100.0));
+  renderBlock.add(new RenderSolidColor(0x7700FFFF, desiredHeight: 100.0, desiredWidth: 50.0));
+
+  root.add(renderBlock);
+
+  var row = new RenderFlex(
+    direction: FlexDirection.Horizontal,
+    decoration: new BoxDecoration(backgroundColor: 0xFF333333));
+
+  // Purple and blue cells
+  addFlexChild(row, 0x77FF00FF, flex: 1);
+  addFlexChild(row, 0xFF0000FF, flex: 2);
+
+  root.add(row);
+  row.parentData.flex = 3;
 
   renderView = new RenderView(root: root);
   renderView.layout(newWidth: view.width, newHeight: view.height);
 
   view.scheduleFrame();
 }