Port DrawerHeader to fn2 world.

This includes making SizedBox default to infinite size, and making
Container default to containing one infinite-sized SizedBox. That way,
you can use an empty Container as a spacer in a flex box.

The rendering doesn't quite work, because of a bug in flex whereby it
doesn't shrink-wrap its contents in the cross-direction, it fills the
parent. Collin is on that.

R=jackson@google.com

Review URL: https://codereview.chromium.org/1163633003

examples/stocks2/lib/stock_app.dart

@@ -4,7 +4,7 @@
 
 import 'package:sky/framework/components2/tool_bar.dart';
 import 'package:sky/framework/components2/drawer.dart';
-// import 'package:sky/framework/components2/drawer_header.dart';
+import 'package:sky/framework/components2/drawer_header.dart';
 import 'package:sky/framework/components2/floating_action_button.dart';
 import 'package:sky/framework/components2/icon.dart';
 import 'package:sky/framework/components2/icon_button.dart';
@@ -115,7 +115,7 @@ class StocksApp extends App {
       controller: _drawerController,
       level: 3,
       children: [
-        // new DrawerHeader(children: [new Text('Stocks')]),
+        new DrawerHeader(children: [new Text('Stocks')]),
         new MenuItem(
           key: 'Stock list',
           icon: 'action/assessment',

sdk/lib/framework/components2/drawer_header.dart

@@ -3,43 +3,48 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../theme/colors.dart';
-import '../theme/view_configuration.dart';
+import '../theme2/colors.dart';
+import '../theme2/view_configuration.dart';
 
 class DrawerHeader extends Component {
-  static final Style _style = new Style('''
-    height: ${140 + kStatusBarHeight}px;
-    background-color: ${BlueGrey[50]};
-    border-bottom: 1px solid #D1D9E1;
-    padding-bottom: 7px;
-    margin-bottom: 8px;'''
-  );
-
-  static final FlexBoxParentData _spacerParentData = new FlexBoxParentData()..flex = 1;
-
-  static final Style _labelStyle = new Style('''
-    padding: 0 16px;'''
-  );
 
   List<UINode> children;
 
   DrawerHeader({ Object key, this.children }) : super(key: key);
 
   UINode build() {
-    return new FlexContainer(
-      direction: FlexDirection.vertical,
-      style: _style,
-      children: [
-        new ParentDataNode(
-          new Container(key: 'Spacer'),
-          _spacerParentData
-        ),
-        new Container(
-          key: 'Label',
-          style: _labelStyle,
-          children: children
+    return new Container(
+      key: 'drawer-header-outside',
+      desiredSize: const Size.fromHeight(kStatusBarHeight + kMaterialDrawerHeight),
+      decoration: new BoxDecoration(
+        backgroundColor: BlueGrey[50],
+        border: const Border(
+          bottom: const BorderSide(
+            color: const Color(0xFFD1D9E1),
+            width: 1.0
+          )
         )
-      ]
+      ),
+      padding: const EdgeDims.only(bottom: 7.0),
+      margin: const EdgeDims.only(bottom: 8.0),
+      child: new FlexContainer(
+        key: 'drawer-header-inside',
+        direction: FlexDirection.vertical,
+        children: [
+          new FlexExpandingChild(new Container(
+            key: 'drawer-header-spacer',
+            desiredSize: Size.infinite
+           )),
+          new Container(
+            key: 'drawer-header-label',
+            padding: const EdgeDims.symmetric(horizontal: 16.0),
+            child: new FlexContainer(
+              direction: FlexDirection.horizontal,
+              children: children
+            )
+          )
+        ]
+      )
     );
   }
 }

sdk/lib/framework/fn2.dart

@@ -407,8 +407,11 @@ class SizedBox extends OneChildRenderObjectWrapper {
   RenderSizedBox root;
   final Size desiredSize;
 
-  SizedBox({ this.desiredSize, UINode child, Object key })
-    : super(child: child, key: key);
+  SizedBox({
+    this.desiredSize: sky.Size.infinite,
+    UINode child,
+    Object key
+  }) : super(child: child, key: key);
 
   RenderSizedBox createNode() => new RenderSizedBox(desiredSize: desiredSize);
 
@@ -966,6 +969,9 @@ class Container extends Component {
     if (transform != null)
       current = new Transform(transform: transform, child: current);
 
+    if (current == null)
+      current = new SizedBox();
+
     return current;
   }
 }

sdk/lib/framework/theme2/view_configuration.dart

@@ -6,6 +6,7 @@
 // https://github.com/android/platform_frameworks_base/blob/master/core/java/android/view/ViewConfiguration.java
 
 const double kStatusBarHeight = 25.0;
+const double kMaterialDrawerHeight = 140.0;
 const double kScrollbarSize = 10.0;
 const double kScrollbarFadeDuration = 250.0;
 const double kScrollbarFadeDelay = 300.0;