Merge pull request #792 from Hixie/flex-part3

Add `Row` and `Column` widgets so you don't have to use Flex.

packages/flutter/lib/widgets/README.md

@@ -46,10 +46,9 @@ very commonly used:
  * `Text`: The `Text` widget lets you create a run of styled text within your
    application.
 
- * `Flex`: The `Flex` widget lets you create flexible layouts in both the
-   horizontal and vertical direction. Its design is based on the web's flexbox
-   layout model. You can also use the simpler `Block` widget to create vertical
-   layouts of inflexible items.
+ * `Row`, `Column`: These flex widgets let you create flexible layouts
+   in both the horizontal (`Row`) and vertical (`Column`) directions.
+   Its design is based on the web's flexbox layout model.
 
  * `Container`: The `Container` widget lets you create rectangular visual
    element. A container can be decorated with a `BoxDecoration`, such as a
@@ -75,7 +74,7 @@ class MyToolBar extends Component {
       ),
       height: 56.0,
       padding: const EdgeDims.symmetric(horizontal: 8.0),
-      child: new Flex([
+      child: new Row([
         new NetworkImage(src: 'menu.png', width: 25.0, height: 25.0),
         new Flexible(child: new Text('My awesome toolbar')),
         new NetworkImage(src: 'search.png', width: 25.0, height: 25.0),
@@ -85,14 +84,15 @@ class MyToolBar extends Component {
 }
 ```
 
-The `MyToolBar` component creates a cyan `Container` with a height of 56
-device-independent pixels with an internal padding of 8 pixels, both on the
-left and the right. Inside the container, `MyToolBar` uses a `Flex` layout
-in the (default) horizontal direction. The middle child, the `Text` widget, is
-marked as `Flexible`, which means it expands to fill any remaining available
-space that hasn't been consumed by the inflexible children. You can have
-multiple `Flexible` children and determine the ratio in which they consume the
-available space using the `flex` argument to `Flexible`.
+The `MyToolBar` component creates a cyan `Container` with a height of
+56 device-independent pixels with an internal padding of 8 pixels,
+both on the left and the right. Inside the container, `MyToolBar` uses
+a `Row` layout. The middle child, the `Text` widget, is marked as
+`Flexible`, which means it expands to fill any remaining available
+space that hasn't been consumed by the inflexible children. You can
+have multiple `Flexible` children and determine the ratio in which
+they consume the available space using the `flex` argument to
+`Flexible`.
 
 To use this component, we simply create an instance of `MyToolBar` in a `build`
 function:
@@ -207,7 +207,7 @@ button:
   Widget build() {
     return new MyButton(
       child: new ShrinkWrapWidth(
-        child: new Flex([
+        child: new Row([
           new NetworkImage(src: 'thumbs-up.png', width: 25.0, height: 25.0),
           new Container(
             padding: const EdgeDims.only(left: 10.0),
@@ -272,7 +272,7 @@ class MyDialog extends StatefulComponent {
   }
 
   Widget build() {
-    return new Flex([
+    return new Row([
       new MyCheckbox(
         value: _checkboxValue,
         onChanged: _handleCheckboxValueChanged

packages/flutter/lib/widgets/basic.dart

@@ -476,6 +476,24 @@ class Flex extends MultiChildRenderObjectWrapper {
 
 }
 
+class Row extends Flex {
+  Row(List<Widget> children, {
+    Key key,
+    justifyContent: FlexJustifyContent.start,
+    alignItems: FlexAlignItems.center,
+    textBaseline
+  }) : super(children, key: key, direction: FlexDirection.horizontal, justifyContent: justifyContent, alignItems: alignItems);
+}
+
+class Column extends Flex {
+  Column(List<Widget> children, {
+    Key key,
+    justifyContent: FlexJustifyContent.start,
+    alignItems: FlexAlignItems.center,
+    textBaseline
+  }) : super(children, key: key, direction: FlexDirection.vertical, justifyContent: justifyContent, alignItems: alignItems);
+}
+
 class Flexible extends ParentDataNode {
   Flexible({ Key key, int flex: 1, Widget child })
     : super(child, new FlexBoxParentData()..flex = flex, key: key);

packages/flutter/lib/widgets/dialog.dart

@@ -80,7 +80,7 @@ class Dialog extends Component {
 
     if (actions != null)
       dialogBody.add(new Container(
-        child: new Flex(actions,
+        child: new Row(actions,
           justifyContent: FlexJustifyContent.end
         )
       ));

packages/flutter/lib/widgets/drawer_header.dart

@@ -30,7 +30,7 @@ class DrawerHeader extends Component {
       ),
       padding: const EdgeDims.only(bottom: 7.0),
       margin: const EdgeDims.only(bottom: 8.0),
-      child: new Flex([
+      child: new Column([
         new Flexible(child: new Container()),
         new Container(
           padding: const EdgeDims.symmetric(horizontal: 16.0),
@@ -38,8 +38,7 @@ class DrawerHeader extends Component {
             style: Theme.of(this).text.body2,
             child: child
           )
-        )],
-        direction: FlexDirection.vertical
+        )]
       )
     );
   }

packages/flutter/lib/widgets/drawer_item.dart

@@ -91,7 +91,7 @@ class DrawerItem extends ButtonBase {
         height: 48.0,
         decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)),
         child: new InkWell(
-          child: new Flex(flexChildren)
+          child: new Row(flexChildren)
         )
       )
     );

packages/flutter/lib/widgets/snack_bar.dart

@@ -94,7 +94,7 @@ class SnackBar extends Component {
           margin: const EdgeDims.symmetric(horizontal: 24.0),
           child: new DefaultTextStyle(
             style: new TextStyle(color: Theme.of(this).accentColor),
-            child: new Flex(children)
+            child: new Row(children)
           )
         )
       )

packages/flutter/lib/widgets/tabs.dart

@@ -346,7 +346,7 @@ class Tab extends Component {
     } else if (label.text == null) {
       labelContent = _buildLabelIcon();
     } else {
-      labelContent = new Flex(
+      labelContent = new Column(
         <Widget>[
           new Container(
             child: _buildLabelIcon(),
@@ -355,8 +355,7 @@ class Tab extends Component {
           _buildLabelText()
         ],
         justifyContent: FlexJustifyContent.center,
-        alignItems: FlexAlignItems.center,
-        direction: FlexDirection.vertical
+        alignItems: FlexAlignItems.center
       );
     }
 
@@ -609,8 +608,6 @@ class TabNavigator extends Component {
     );
 
     Widget content = views[selectedIndex].buildContent();
-    return new Flex([tabBar, new Flexible(child: content)],
-      direction: FlexDirection.vertical
-    );
+    return new Column([tabBar, new Flexible(child: content)]);
   }
 }

packages/flutter/lib/widgets/tool_bar.dart

@@ -68,13 +68,12 @@ class ToolBar extends Component {
     Widget content = new Container(
       child: new DefaultTextStyle(
         style: sideStyle,
-        child: new Flex([
+        child: new Column([
             new Container(
-              child: new Flex(children),
+              child: new Row(children),
               height: kToolBarHeight
             ),
           ],
-          direction: FlexDirection.vertical,
           justifyContent: FlexJustifyContent.end
         )
       ),

packages/flutter/lib/widgets/widgets.md

@@ -26,31 +26,40 @@ order to make them easier to use.
 Layout models
 -------------
 
- - `Flex` Layout a list of child widgets in either the horizontal or vertical
-   `direction`. The direction along which the widgets are laid out is called the
-   *main* direction and the other axis is called the *cross* direction. A `Flex`
-   widget sizes itself to the maximum size permitted by its parent.
+There are two _flex_ layout models:
 
-   Each child of a `Flex` widget is either *flexible* or *inflexible*. The flex
-   first lays out its inflexible children and subtracts their total length along
-   the main direction to determine how much free space is available. The flex
-   then divides this free space among the flexible children in a ratio
-   determined by their `flex` properties.
+ - `Row`: Layout a list of child widgets in the horizontal direction.
 
-   The `alignItems` property determines how children are positioned in the cross
-   direction. The `justifyContent` property determines how the remaining free
-   space (if any) in the main direction is allocated.
+ - `Column': Layout a list of child widgets in the vertical direction.
 
-   - `Flexible` Mark this child as being flexible with the given `flex` ratio.
+The direction along which the widgets are laid out is called the
+*main* direction and the other axis is called the *cross* direction.
+These flex widgets size themselves to the maximum size permitted by
+its parent, unless that would be infinite size, in which case they
+shrink-wrap their children. For details, see [flex.md](flex.md).
 
- - `Stack` Layout a list of child widgets on top of each other from back to
+Each child of a flex widget is either *flexible* or *inflexible*.
+The flex first lays out its inflexible children and subtracts their
+total length along the main direction to determine how much free space
+is available. The flex then divides this free space among the flexible
+children in a ratio determined by their `flex` properties.
+
+The `alignItems` property determines how children are positioned in
+the cross direction. The `justifyContent` property determines how the
+remaining free space (if any) in the main direction is allocated.
+
+ - `Flexible`: Mark this child as being flexible with the given `flex` ratio.
+
+There is also a stacking layout model:
+
+ - `Stack`: Layout a list of child widgets on top of each other from back to
    front. Each child of a `Stack` widget is either *positioned* or
    *non-positioned*. The stack sizes itself to the contain all the
    non-positioned children, which are located at the top-left corner of the
    stack. The *positioned* children are then located relative to the stack
    according to their `top`, `right`, `bottom`, and `left` properties.
 
-    - `Positioned` Mark this child as *positioned*. If the `top` property is
+    - `Positioned`: Mark this child as *positioned*. If the `top` property is
       non-null, the top edge of this child will be positioned `top` layout units
       from the top of the stack widget. The `right`, `bottom`, and `right`
       properties work analogously. Note that if the both the `top` and `bottom`