Port some more examples to fn3

examples/widgets/drag_and_drop.dart

@@ -5,7 +5,7 @@
 import 'dart:sky' as sky;
 
 import 'package:sky/material.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/src/fn3.dart';
 
 final double kTop = 10.0 + sky.view.paddingTop;
 final double kLeft = 10.0;
@@ -17,10 +17,13 @@ class DragData {
 }
 
 class ExampleDragTarget extends StatefulComponent {
-  String _text = 'ready';
+  ExampleDragTargetState createState() => new ExampleDragTargetState(this);
+}
 
-  void syncConstructorArguments(ExampleDragTarget source) {
-  }
+class ExampleDragTargetState extends ComponentState<ExampleDragTarget> {
+  ExampleDragTargetState(ExampleDragTarget config) : super(config);
+
+  String _text = 'ready';
 
   void _handleAccept(DragData data) {
     setState(() {
@@ -28,10 +31,10 @@ class ExampleDragTarget extends StatefulComponent {
     });
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     return new DragTarget<DragData>(
       onAccept: _handleAccept,
-      builder: (List<DragData> data, _) {
+      builder: (BuildContext context, List<DragData> data, _) {
         return new Container(
           width: 100.0,
           height: 100.0,
@@ -52,8 +55,8 @@ class ExampleDragTarget extends StatefulComponent {
   }
 }
 
-class Dot extends Component {
-  Widget build() {
+class Dot extends StatelessComponent {
+  Widget build(BuildContext context) {
     return new Container(
       width: 50.0,
       height: 50.0,
@@ -64,7 +67,13 @@ class Dot extends Component {
   }
 }
 
-class DragAndDropApp extends App {
+class DragAndDropApp extends StatefulComponent {
+  DragAndDropAppState createState() => new DragAndDropAppState(this);
+}
+
+class DragAndDropAppState extends ComponentState<DragAndDropApp> {
+  DragAndDropAppState(DragAndDropApp config) : super(config);
+
   DragController _dragController;
   Offset _displacement = Offset.zero;
 
@@ -99,7 +108,7 @@ class DragAndDropApp extends App {
     });
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     List<Widget> layers = <Widget>[
       new Row([
         new ExampleDragTarget(),

examples/widgets/horizontal_scrolling.dart

@@ -2,14 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/widgets.dart';
+import 'package:sky/src/fn3.dart';
 
-class Circle extends Component {
+class Circle extends StatelessComponent {
   Circle({ this.margin: EdgeDims.zero });
 
   final EdgeDims margin;
 
-  Widget build() {
+  Widget build(BuildContext context) {
     return new Container(
       width: 50.0,
       margin: margin + new EdgeDims.symmetric(horizontal: 2.0),
@@ -21,8 +21,8 @@ class Circle extends Component {
   }
 }
 
-class HorizontalScrollingApp extends App {
-  Widget build() {
+class HorizontalScrollingApp extends StatelessComponent {
+  Widget build(BuildContext context) {
     List<Widget> circles = [
       new Circle(margin: new EdgeDims.only(left: 10.0)),
       new Circle(),
@@ -41,11 +41,7 @@ class HorizontalScrollingApp extends App {
     return new Center(
       child: new Container(
         height: 50.0,
-        child: new Row([
-            new Block(circles, scrollDirection: ScrollDirection.horizontal)
-          ],
-          justifyContent: FlexJustifyContent.end
-        )
+        child: new Block(circles, scrollDirection: ScrollDirection.horizontal)
       )
     );
   }

examples/widgets/navigation.dart

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/widgets.dart';
+import 'package:sky/src/fn3.dart';
 
 List<Route> routes = [
   new Route(
@@ -60,21 +60,28 @@ List<Route> routes = [
   )
 ];
 
-class NavigationExampleApp extends App {
-  NavigationState _navState = new NavigationState(routes);
+class NavigationExampleApp extends StatefulComponent {
+  NavigationExampleAppState createState() => new NavigationExampleAppState(this);
+}
+
+class NavigationExampleAppState extends ComponentState<NavigationExampleApp> {
+  NavigationExampleAppState(NavigationExampleApp config) : super(config);
+
+  NavigatorHistory _history = new NavigatorHistory(routes);
 
   void onBack() {
-    if (_navState.hasPrevious()) {
+    if (_history.hasPrevious()) {
       setState(() {
-        _navState.pop();
+        _history.pop();
       });
     } else {
-      super.onBack();
+      // TODO(abarth): Integrate with the system navigator.
+      // super.onBack();
     }
   }
 
-  Widget build() {
-    return new Row([new Navigator(_navState)]);
+  Widget build(BuildContext context) {
+    return new Row([new Navigator(_history)]);
   }
 }
 

examples/widgets/pageable_list.dart

@@ -4,7 +4,8 @@
 
 import 'package:sky/animation.dart';
 import 'package:sky/material.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/painting.dart';
+import 'package:sky/src/fn3.dart';
 
 class CardModel {
   CardModel(this.value, this.size, this.color);
@@ -15,17 +16,12 @@ class CardModel {
   Key get key => new ObjectKey(this);
 }
 
-class PageableListApp extends App {
-
-  static const TextStyle cardLabelStyle =
-    const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
-
-  List<CardModel> cardModels;
-  Size pageSize = new Size(200.0, 200.0);
-  ScrollDirection scrollDirection = ScrollDirection.horizontal;
-  bool itemsWrap = false;
+class PageableListApp extends StatefulComponent {
+  PageableListAppState createState() => new PageableListAppState(this);
+}
 
-  void initState() {
+class PageableListAppState extends ComponentState<PageableListApp> {
+  PageableListAppState(PageableListApp config) : super(config) {
     List<Size> cardSizes = [
       [100.0, 300.0], [300.0, 100.0], [200.0, 400.0], [400.0, 400.0], [300.0, 400.0]
     ]
@@ -36,17 +32,23 @@ class PageableListApp extends App {
       Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardSizes.length);
       return new CardModel(i, cardSizes[i], color);
     });
-
-    super.initState();
   }
 
+  static const TextStyle cardLabelStyle =
+    const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
+
+  List<CardModel> cardModels;
+  Size pageSize = new Size(200.0, 200.0);
+  ScrollDirection scrollDirection = ScrollDirection.horizontal;
+  bool itemsWrap = false;
+
   void updatePageSize(Size newSize) {
     setState(() {
       pageSize = newSize;
     });
   }
 
-  Widget buildCard(CardModel cardModel) {
+  Widget buildCard(BuildContext context, CardModel cardModel) {
     Widget card = new Card(
       color: cardModel.color,
       child: new Container(
@@ -142,7 +144,7 @@ class PageableListApp extends App {
     );
   }
 
-  Widget buildBody() {
+  Widget buildBody(BuildContext context) {
     Widget list = new PageableList<CardModel>(
       items: cardModels,
       itemsWrap: itemsWrap,
@@ -156,12 +158,12 @@ class PageableListApp extends App {
       callback: updatePageSize,
       child: new Container(
         child: list,
-        decoration: new BoxDecoration(backgroundColor: Theme.of(this).primarySwatch[50])
+        decoration: new BoxDecoration(backgroundColor: Theme.of(context).primarySwatch[50])
       )
     );
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     return new IconTheme(
       data: const IconThemeData(color: IconThemeColor.white),
       child: new Theme(
@@ -175,7 +177,7 @@ class PageableListApp extends App {
           child: new Scaffold(
             drawer: buildDrawer(),
             toolbar: buildToolBar(),
-            body: buildBody()
+            body: buildBody(context)
           )
         )
       )

examples/widgets/piano.dart

@@ -7,7 +7,7 @@ import 'package:sky_services/media/media.mojom.dart';
 import 'package:sky/material.dart';
 import 'package:sky/rendering.dart';
 import 'package:sky/services.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/src/fn3.dart';
 
 // All of these sounds are marked as public domain at soundbible.
 const String chimes = "http://soundbible.com/grab.php?id=2030&type=wav";
@@ -38,7 +38,7 @@ class Key {
   }
 }
 
-class PianoApp extends App {
+class PianoApp extends StatelessComponent {
   final List<Key> keys = [
     new Key(Colors.red[500], chimes),
     new Key(Colors.orange[500], chainsaw),
@@ -68,19 +68,19 @@ class PianoApp extends App {
     // Are we leaking all the player connections?
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     List<Widget> children = [];
     for (Key key in keys) {
       children.add(
-        new Listener(
-          child: new Flexible(
+        new Flexible(
+          child: new Listener(
             child: new Container(
               decoration: new BoxDecoration(backgroundColor: key.color)
-            )
-          ),
-          onPointerCancel: (_) => key.up(),
-          onPointerDown: (_) => key.down(),
-          onPointerUp: (_) => key.up()
+            ),
+            onPointerCancel: (_) => key.up(),
+            onPointerDown: (_) => key.down(),
+            onPointerUp: (_) => key.up()
+          )
         )
       );
     }

examples/widgets/progress_indicator.dart

@@ -4,15 +4,14 @@
 
 import 'package:sky/animation.dart';
 import 'package:sky/material.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/src/fn3.dart';
 
-class ProgressIndicatorApp extends App {
-
-  ValueAnimation<double> valueAnimation;
-  Direction valueAnimationDirection = Direction.forward;
+class ProgressIndicatorApp extends StatefulComponent {
+  ProgressIndicatorAppState createState() => new ProgressIndicatorAppState(this);
+}
 
-  void initState() {
-    super.initState();
+class ProgressIndicatorAppState extends ComponentState<ProgressIndicatorApp> {
+  ProgressIndicatorAppState(ProgressIndicatorApp config) : super(config) {
     valueAnimation = new ValueAnimation<double>()
       ..duration = const Duration(milliseconds: 1500)
       ..variable = new AnimatedValue<double>(
@@ -29,6 +28,9 @@ class ProgressIndicatorApp extends App {
     valueAnimation.play(valueAnimationDirection);
   }
 
+  ValueAnimation<double> valueAnimation;
+  Direction valueAnimationDirection = Direction.forward;
+
   void handleTap() {
     setState(() {
       // valueAnimation.isAnimating is part of our build state
@@ -46,7 +48,7 @@ class ProgressIndicatorApp extends App {
     valueAnimation.play(valueAnimationDirection);
   }
 
-  Widget buildIndicators() {
+  Widget buildIndicators(BuildContext context) {
     List<Widget> indicators = <Widget>[
         new SizedBox(
           width: 200.0,
@@ -76,12 +78,12 @@ class ProgressIndicatorApp extends App {
     );
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     Widget body = new GestureDetector(
       onTap: handleTap,
       child: new Container(
         padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
-        decoration: new BoxDecoration(backgroundColor: Theme.of(this).cardColor),
+        decoration: new BoxDecoration(backgroundColor: Theme.of(context).cardColor),
         child: new BuilderTransition(
           variables: [valueAnimation.variable],
           performance: valueAnimation.view,
@@ -103,7 +105,7 @@ class ProgressIndicatorApp extends App {
           child: new Scaffold(
             toolbar: new ToolBar(center: new Text('Progress Indicators')),
             body: new DefaultTextStyle(
-              style: Theme.of(this).text.title,
+              style: Theme.of(context).text.title,
               child: body
             )
           )

examples/widgets/scale.dart

@@ -4,9 +4,17 @@
 
 import 'package:sky/material.dart';
 import 'package:sky/rendering.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/src/fn3.dart';
 
-class ScaleApp extends App {
+class ScaleApp extends StatefulComponent {
+  ScaleAppState createState() => new ScaleAppState(this);
+}
+
+class ScaleAppState extends ComponentState<ScaleApp> {
+  ScaleAppState(ScaleApp config) : super(config) {
+    _offset = Offset.zero;
+    _zoom = 1.0;
+  }
 
   Point _startingFocalPoint;
 
@@ -16,11 +24,6 @@ class ScaleApp extends App {
   double _previousZoom;
   double _zoom;
 
-  void initState() {
-    _offset = Offset.zero;
-    _zoom = 1.0;
-  }
-
   void _handleScaleStart(Point focalPoint) {
     setState(() {
       _startingFocalPoint = focalPoint;
@@ -48,7 +51,7 @@ class ScaleApp extends App {
     canvas.drawCircle(center, radius, paint);
   }
 
-  Widget build() {
+  Widget build(BuildContext context) {
     return new Theme(
       data: new ThemeData.dark(),
       child: new Scaffold(

packages/flutter/lib/src/fn3/gesture_detector.dart

@@ -55,7 +55,9 @@ class GestureDetector extends StatefulComponent {
 }
 
 class GestureDetectorState extends ComponentState<GestureDetector> {
-  GestureDetectorState(GestureDetector config) : super(config);
+  GestureDetectorState(GestureDetector config) : super(config) {
+    didUpdateConfig(null);
+  }
 
   final PointerRouter _router = SkyBinding.instance.pointerRouter;