Teach Block about padding.

It's common to want a scrolling viewport but with padding around the
contents. Teaching Block about this makes the places that do this
substantially simpler and further buries ScrollableViewport and
BlockBody (they're now only used in scrollable.dart).

examples/fitness/lib/meal.dart

@@ -84,19 +84,15 @@ class MealFragmentState extends State<MealFragment> {
 
   Widget buildBody() {
     Meal meal = new Meal(when: new DateTime.now());
-    // TODO(ianh): Fix Block such that we could use that here instead of rolling our own
-    return new ScrollableViewport(
-      child: new Container(
-        padding: const EdgeDims.all(20.0),
-        child: new BlockBody(<Widget>[
-          new Text(meal.displayDate),
-          new Input(
-            key: descriptionKey,
-            placeholder: 'Describe meal',
-            onChanged: _handleDescriptionChanged
-          ),
-        ])
-      )
+    return new Block(<Widget>[
+        new Text(meal.displayDate),
+        new Input(
+          key: descriptionKey,
+          placeholder: 'Describe meal',
+          onChanged: _handleDescriptionChanged
+        ),
+      ],
+      padding: const EdgeDims.all(20.0)
     );
   }
 

examples/fitness/lib/settings.dart

@@ -90,29 +90,25 @@ class SettingsFragmentState extends State<SettingsFragment> {
   }
 
   Widget buildSettingsPane(BuildContext context) {
-    // TODO(ianh): Make Block capable of doing this
-    return new ScrollableViewport(
-      child: new Container(
-        padding: const EdgeDims.symmetric(vertical: 20.0),
-        child: new BlockBody(<Widget>[
-          new DrawerItem(
-            onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); },
-            child: new Row(<Widget>[
-              new Flexible(child: new Text('Back up data to the cloud')),
-              new Switch(value: config.userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged),
-            ])
-          ),
-          new DrawerItem(
-            onPressed: () => _handleGoalWeightPressed(),
-            child: new Column(<Widget>[
-                new Text('Goal Weight'),
-                new Text(goalWeightText, style: Theme.of(context).text.caption),
-              ],
-              alignItems: FlexAlignItems.start
-            )
-          ),
-        ])
-      )
+    return new Block(<Widget>[
+        new DrawerItem(
+          onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); },
+          child: new Row(<Widget>[
+            new Flexible(child: new Text('Back up data to the cloud')),
+            new Switch(value: config.userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged),
+          ])
+        ),
+        new DrawerItem(
+          onPressed: () => _handleGoalWeightPressed(),
+          child: new Column(<Widget>[
+              new Text('Goal Weight'),
+              new Text(goalWeightText, style: Theme.of(context).text.caption),
+            ],
+            alignItems: FlexAlignItems.start
+          )
+        ),
+      ],
+      padding: const EdgeDims.symmetric(vertical: 20.0)
     );
   }
 

examples/stocks/lib/stock_settings.dart

@@ -81,34 +81,31 @@ class StockSettingsState extends State<StockSettings> {
   Widget buildSettingsPane(BuildContext context) {
     // TODO(ianh): Once we have the gesture API hooked up, fix https://github.com/domokit/mojo/issues/281
     // (whereby tapping the widgets below causes both the widget and the menu item to fire their callbacks)
-    return new ScrollableViewport(
-      child: new Container(
-        padding: const EdgeDims.symmetric(vertical: 20.0),
-        child: new BlockBody(<Widget>[
-          new DrawerItem(
-            icon: 'action/thumb_up',
-            onPressed: () => _confirmOptimismChange(),
-            child: new Row(<Widget>[
-              new Flexible(child: new Text('Everything is awesome')),
-              new Checkbox(
-                value: config.optimism == StockMode.optimistic,
-                onChanged: (bool value) => _confirmOptimismChange()
-              ),
-            ])
-          ),
-          new DrawerItem(
-            icon: 'action/backup',
-            onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); },
-            child: new Row(<Widget>[
-              new Flexible(child: new Text('Back up stock list to the cloud')),
-              new Switch(
-                value: config.backup == BackupMode.enabled,
-                onChanged: _handleBackupChanged
-              ),
-            ])
-          ),
-        ])
-      )
+    return new Block(<Widget>[
+        new DrawerItem(
+          icon: 'action/thumb_up',
+          onPressed: () => _confirmOptimismChange(),
+          child: new Row(<Widget>[
+            new Flexible(child: new Text('Everything is awesome')),
+            new Checkbox(
+              value: config.optimism == StockMode.optimistic,
+              onChanged: (bool value) => _confirmOptimismChange()
+            ),
+          ])
+        ),
+        new DrawerItem(
+          icon: 'action/backup',
+          onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); },
+          child: new Row(<Widget>[
+            new Flexible(child: new Text('Back up stock list to the cloud')),
+            new Switch(
+              value: config.backup == BackupMode.enabled,
+              onChanged: _handleBackupChanged
+            ),
+          ])
+        ),
+      ],
+      padding: const EdgeDims.symmetric(vertical: 20.0)
     );
   }
 

packages/flutter/lib/src/material/dropdown.dart

@@ -107,7 +107,7 @@ class _DropdownMenu extends StatusTransitionComponent {
             builder: (BuildContext context) {
               RenderBox renderBox = context.findRenderObject();
               return new CustomPaint(
-                child: new ScrollableViewport(child: new Container(child: new Column(children))),
+                child: new Block(children),
                 onPaint: (ui.Canvas canvas, Size size) {
                   double top = renderBox.globalToLocal(new Point(0.0, menuTop.value)).y;
                   double bottom = renderBox.globalToLocal(new Point(0.0, menuBottom.value)).y;

packages/flutter/lib/src/material/popup_menu.dart

@@ -76,14 +76,11 @@ class _PopupMenu extends StatelessComponent {
               ),
               child: new IntrinsicWidth(
                 stepWidth: _kMenuWidthStep,
-                child: new ScrollableViewport(
-                  child: new Container(
-                    // TODO(abarth): Teach Block about padding.
-                    padding: const EdgeDims.symmetric(
-                      horizontal: _kMenuHorizontalPadding,
-                      vertical: _kMenuVerticalPadding
-                    ),
-                    child: new BlockBody(children)
+                child: new Block(
+                  children,
+                  padding: const EdgeDims.symmetric(
+                    horizontal: _kMenuHorizontalPadding,
+                    vertical: _kMenuVerticalPadding
                   )
                 )
               )

packages/flutter/lib/src/widgets/scrollable.dart

@@ -382,6 +382,7 @@ class ScrollableViewportState extends ScrollableState<ScrollableViewport> {
 class Block extends StatelessComponent {
   Block(this.children, {
     Key key,
+    this.padding,
     this.initialScrollOffset,
     this.scrollDirection: ScrollDirection.vertical,
     this.onScroll
@@ -390,6 +391,7 @@ class Block extends StatelessComponent {
   }
 
   final List<Widget> children;
+  final EdgeDims padding;
   final double initialScrollOffset;
   final ScrollDirection scrollDirection;
   final ScrollListener onScroll;
@@ -401,11 +403,14 @@ class Block extends StatelessComponent {
   }
 
   Widget build(BuildContext context) {
+    Widget contents = new BlockBody(children, direction: _direction);
+    if (padding != null)
+      contents = new Padding(padding: padding, child: contents);
     return new ScrollableViewport(
       initialScrollOffset: initialScrollOffset,
       scrollDirection: scrollDirection,
       onScroll: onScroll,
-      child: new BlockBody(children, direction: _direction)
+      child: contents
     );
   }
 }