Fix some examples.

- drag and drop was using the wrong draggables (long press vs short
  press).

- navigation.dart wasn't using material correctly and so was ending up
  with some red text.

- piano wasn't followig our style guide even a little.

- date picker was not scrollable.

examples/widgets/drag_and_drop.dart

@@ -110,7 +110,7 @@ class ExampleDragSource extends StatelessComponent {
     }
 
     if (heavy) {
-      return new Draggable<Color>(
+      return new LongPressDraggable<Color>(
         data: color,
         child: contents,
         feedback: feedback,
@@ -118,7 +118,7 @@ class ExampleDragSource extends StatelessComponent {
         dragAnchor: anchor
       );
     } else {
-      return new LongPressDraggable<Color>(
+      return new Draggable<Color>(
         data: color,
         child: contents,
         feedback: feedback,

examples/widgets/navigation.dart

@@ -6,20 +6,24 @@ import 'package:flutter/material.dart';
 
 class Home extends StatelessComponent {
   Widget build(BuildContext context) {
-    return new Container(
-      padding: const EdgeDims.all(30.0),
-      decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
-      child: new Column(<Widget>[
-        new Text("You are at home"),
-        new RaisedButton(
-          child: new Text('GO SHOPPING'),
-          onPressed: () => Navigator.of(context).pushNamed('/shopping')
-        ),
-        new RaisedButton(
-          child: new Text('START ADVENTURE'),
-          onPressed: () => Navigator.of(context).pushNamed('/adventure')
-        )],
-        justifyContent: FlexJustifyContent.center
+    return new Material(
+      child: new Center(
+        child: new Block(<Widget>[
+            new Text(
+              'You are at home.',
+              style: Theme.of(context).text.display2.copyWith(textAlign: TextAlign.center)
+            ),
+            new RaisedButton(
+              child: new Text('GO SHOPPING'),
+              onPressed: () => Navigator.of(context).pushNamed('/shopping')
+            ),
+            new RaisedButton(
+              child: new Text('START ADVENTURE'),
+              onPressed: () => Navigator.of(context).pushNamed('/adventure')
+            )
+          ],
+          padding: const EdgeDims.all(30.0)
+        )
       )
     );
   }
@@ -27,20 +31,25 @@ class Home extends StatelessComponent {
 
 class Shopping extends StatelessComponent {
   Widget build(BuildContext context) {
-    return new Container(
-      padding: const EdgeDims.all(20.0),
-      decoration: new BoxDecoration(backgroundColor: const Color(0xFFBF5FFF)),
-      child: new Column(<Widget>[
-        new Text("Village Shop"),
-        new RaisedButton(
-          child: new Text('RETURN HOME'),
-          onPressed: () => Navigator.of(context).pop()
-        ),
-        new RaisedButton(
-          child: new Text('GO TO DUNGEON'),
-          onPressed: () => Navigator.of(context).pushNamed('/adventure')
-        )],
-        justifyContent: FlexJustifyContent.center
+    return new Material(
+      color: Colors.deepPurple[300],
+      child: new Center(
+        child: new Block(<Widget>[
+            new Text(
+              'Village Shop',
+              style: Theme.of(context).text.display2.copyWith(textAlign: TextAlign.center)
+            ),
+            new RaisedButton(
+              child: new Text('RETURN HOME'),
+              onPressed: () => Navigator.of(context).pop()
+            ),
+            new RaisedButton(
+              child: new Text('GO TO DUNGEON'),
+              onPressed: () => Navigator.of(context).pushNamed('/adventure')
+            )
+          ],
+          padding: const EdgeDims.all(30.0)
+        )
       )
     );
   }
@@ -48,16 +57,21 @@ class Shopping extends StatelessComponent {
 
 class Adventure extends StatelessComponent {
   Widget build(BuildContext context) {
-    return new Container(
-      padding: const EdgeDims.all(20.0),
-      decoration: new BoxDecoration(backgroundColor: const Color(0xFFDC143C)),
-      child: new Column(<Widget>[
-        new Text("Monster's Lair"),
-        new RaisedButton(
-          child: new Text('RUN!!!'),
-          onPressed: () => Navigator.of(context).pop()
-        )],
-        justifyContent: FlexJustifyContent.center
+    return new Material(
+      color: Colors.red[300],
+      child: new Center(
+        child: new Block(<Widget>[
+            new Text(
+              'Monster\'s Lair',
+              style: Theme.of(context).text.display2.copyWith(textAlign: TextAlign.center)
+            ),
+            new RaisedButton(
+              child: new Text('RUN!!!'),
+              onPressed: () => Navigator.of(context).pop()
+            )
+          ],
+          padding: const EdgeDims.all(30.0)
+        )
       )
     );
   }

examples/widgets/piano.dart

@@ -61,11 +61,7 @@ class PianoApp extends StatelessComponent {
     new PianoKey(Colors.purple[500], iLoveYou),
   ];
 
-  Future connect() {
-    return _loadSounds();
-  }
-
-  Future _loadSounds() async {
+  Future loadSounds() async {
     MediaServiceProxy mediaService = new MediaServiceProxy.unbound();
     try {
       shell.connectToService(null, mediaService);
@@ -82,14 +78,16 @@ class PianoApp extends StatelessComponent {
     List<Widget> children = <Widget>[];
     for (PianoKey key in keys) {
       children.add(new Flexible(
-          child: new Listener(
-              child: new Container(
-                  decoration: new BoxDecoration(backgroundColor: key.color)),
-              onPointerCancel: (_) => key.up(),
-              onPointerDown: (_) => key.down(),
-              onPointerUp: (_) => key.up())));
+        child: new Listener(
+          child: new Container(
+            decoration: new BoxDecoration(backgroundColor: key.color)
+          ),
+          onPointerCancel: (_) => key.up(),
+          onPointerDown: (_) => key.down(),
+          onPointerUp: (_) => key.up()
+        )
+      ));
     }
-
     return new Column(children);
   }
 }
@@ -98,20 +96,29 @@ Widget statusBox(Widget child) {
   const mediumGray = const Color(0xff555555);
   const darkGray = const Color(0xff222222);
   return new Center(
-      child: new Container(
-          decoration: const BoxDecoration(boxShadow: const <BoxShadow>[
-            const BoxShadow(
-                color: mediumGray, offset: const Offset(6.0, 6.0), blur: 5.0)
-          ], backgroundColor: darkGray),
-          height: 90.0,
-          padding: const EdgeDims.all(8.0),
-          margin: const EdgeDims.symmetric(horizontal: 50.0),
-          child: new Center(child: child)));
+    child: new Container(
+      decoration: const BoxDecoration(
+        boxShadow: const <BoxShadow>[
+          const BoxShadow(
+            color: mediumGray, offset: const Offset(6.0, 6.0), blur: 5.0)
+        ],
+        backgroundColor: darkGray
+      ),
+      height: 90.0,
+      padding: const EdgeDims.all(8.0),
+      margin: const EdgeDims.symmetric(horizontal: 50.0),
+      child: new Center(child: child)
+    )
+  );
 }
 
 Widget splashScreen() {
   return statusBox(
-      new Text('Loading sound files!', style: new TextStyle(fontSize: 18.0)));
+    new Text(
+      'Loading sound files!',
+      style: new TextStyle(fontSize: 18.0)
+    )
+  );
 }
 
 main() async {
@@ -119,7 +126,7 @@ main() async {
 
   PianoApp app = new PianoApp();
   // use "await" to make sure the sound files are loaded before we show the ui.
-  await app.connect();
+  await app.loadSounds();
   runApp(app);
   // runApp() returns immediately so you can't put application cleanup code
   // here.  Android apps can be killed at any time, so there's also no way to

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

@@ -247,6 +247,7 @@ class _DismissableState extends State<Dismissable> {
       onVerticalDragStart: _directionIsYAxis ? _handleDragStart : null,
       onVerticalDragUpdate: _directionIsYAxis ? _handleDragUpdate : null,
       onVerticalDragEnd: _directionIsYAxis ? _handleDragEnd : null,
+      behavior: HitTestBehavior.opaque,
       child: new SizeObserver(
         onSizeChanged: _handleSizeChanged,
         child: new FadeTransition(

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

@@ -104,6 +104,7 @@ abstract class ScrollableState<T extends Scrollable> extends State<T> {
       onHorizontalDragStart: _getDragStartHandler(ScrollDirection.horizontal),
       onHorizontalDragUpdate: _getDragUpdateHandler(ScrollDirection.horizontal),
       onHorizontalDragEnd: _getDragEndHandler(ScrollDirection.horizontal),
+      behavior: HitTestBehavior.opaque,
       child: new Listener(
         child: buildContent(context),
         onPointerDown: _handlePointerDown