Improve widgets/README.md based on Hixie's feeback

sky/sdk/lib/widgets/README.md

 Sky Widgets
 ===========
 
 Sky widgets are built using a functional-reactive framework, which takes
 inspiration from [React](http://facebook.github.io/react/). The central idea is
 that you build your UI out of components. Components describe what their view
 should look like given their current configuration and state. When a component's
 state changes, the component rebuilds its description, which the framework diffs
 against the previous description in order to determine the minial changes needed
 in the underlying render tree to transition from one state to the next.
@@ skipping 51 matching lines @@
    refer to the same URL, they'll share the underlying image resource.
 
 Below is a simple toolbar example that shows how to combine these widgets:
 
 ```dart
 import 'package:sky/widgets/basic.dart';
 
 class MyToolBar extends Component {
   Widget build() {
     return new Container(
+      height: 56.0,
+      padding: new EdgeDims.symmetric(horizontal: 8.0),
+      decoration: const BoxDecoration(

[Hixie, 2015/06/17 17:13:16]

decoration should go first, since you say "cyan" before "56".

[abarth-chromium, 2015/06/17 17:39:29]

Done.

+        backgroundColor: const Color(0xFF00FFFF),
+      ),
       child: new Flex([
         new Image(src: 'menu.png', size: const Size(25.0, 25.0)),
         new Flexible(child: new Text('My awesome toolbar')),
         new Image(src: 'search.png', size: const Size(25.0, 25.0)),
-      ]),
-      height: 56.0,
-      padding: new EdgeDims.symmetric(horizontal: 8.0),
-      decoration: const BoxDecoration(
-        backgroundColor: const Color(0xFF00FFFF),
-      )
+      ])
     );
   }
 }
 ```
 
 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
@@ skipping 14 matching lines @@
     return new Center(child: new MyToolBar());
   }
 }
 
 void main() {
   new DemoApp();
 }
 ```
 
 Here, we've used the `Center` widget to center the toolbar within the view, both
-vertically and horizontally. Because the toolbar uses a flexible layout
-internally, it expands to fill all the available horizontal space.
+vertically and horizontally. If we didn't center the toolbar, it would fill the
+view, both vertically and horizontally, because the root widget is sized to fill
+the view.
 
 Listening to Events
 -------------------
 
 In addition to being stunningly beautiful, most applications react to user
 input. The first step in building an interactive application is to listen for
 input events. Let's see how that works by creating a simple button:
 
 ```dart
 import 'package:sky/widgets/basic.dart';
 
 final BoxDecoration _decoration = new BoxDecoration(
   borderRadius: 5.0,
   gradient: new LinearGradient(
     endPoints: [ Point.origin, new Point(0.0, 36.0) ],
     colors: [ const Color(0xFFEEEEEE), const Color(0xFFCCCCCC) ]
   )
 );
 
 class MyButton extends Component {
   Widget build() {
     return new Listener(
+      onGestureTap: (event) {
+        print('MyButton was tapped!');
+      },
       child: new Container(
-        child: new Center(
-          child: new Text('Engage')
-        ),
         height: 36.0,
         padding: new EdgeDims.all(8.0),
         margin: new EdgeDims.symmetric(horizontal: 8.0),
-        decoration: _decoration
-      ),
-      onGestureTap: (event) {
-        print('MyButton was tapped!');
-      }
+        decoration: _decoration,
+        child: new Center(
+          child: new Text('Engage')
+        )
+      )
     );
   }
 }
 ```
 
 The `Listener` widget doesn't have an visual representation but instead listens
 for events bubbling through the application. When a tap gesture bubbles out from
 the `Container`, the `Listener` will call its `onGestureTap` callback, in this
 case printing a message to the console.
 
@@ skipping 11 matching lines @@
 
 ```dart
 class MyButton extends Component {
   MyButton({ this.child, this.onPressed });
 
   final Widget child;
   final Function onPressed;
 
   Widget build() {
     return new Listener(
+      onGestureTap: (_) {
+        if (onPressed != null)
+          onPressed();
+      },
       child: new Container(
-        child: new Center(child: child),
         height: 36.0,
         padding: new EdgeDims.all(8.0),
         margin: new EdgeDims.symmetric(horizontal: 8.0),
-        decoration: _decoration
-      ),
-      onGestureTap: (_) {
-        if (onPressed != null)
-          onPressed();
-      }
+        decoration: _decoration,
+        child: new Center(child: child)
+      )
     );
   }
 }
 ```
 
 Rather than providing the button's label as a `String`, we've let the code that
 uses `MyButton` provide an arbitrary `Widget` to put inside the button. For
 example, we can put an elaborate layout involving text and an image inside the
 button:
 
 ```dart
   Widget build() {
     return new MyButton(
       child: new ShrinkWrapWidth(
         child: new Flex([
           new Image(src: 'thumbs-up.png', size: const Size(25.0, 25.0)),
           new Container(
+            padding: new EdgeDims.only(left: 10.0)
             child: new Text('Thumbs up'),
-            padding: new EdgeDims.only(left: 10.0)
           )
         ])
       )
     );
   }
 ```
 
 State
 -----
 
 TODO(abarth)