Port SkySprites and clients to fn3

examples/game/example_effect_line.dart

 import 'package:sky/material.dart';
 import 'package:sky/rendering.dart';
 import 'package:sky/services.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/widgets_next.dart';
 import 'package:skysprites/skysprites.dart';
 
 AssetBundle _initBundle() {
@@ -14,7 +14,6 @@ final AssetBundle _bundle = _initBundle();
 
 ImageMap _images;
 SpriteSheet _spriteSheet;
-TestApp _app;
 
 main() async {
   _images = new ImageMap(_bundle);
@@ -26,12 +25,19 @@ main() async {
 
   assert(_images["assets/checker.png"] != null);
 
-  _app = new TestApp();
-  runApp(_app);
+  runApp(new TestApp());
 }
 
-class TestApp extends App {
+class TestApp extends StatefulComponent {
+  TestAppState createState() => new TestAppState();
+}
+
+final ThemeData _theme = new ThemeData(
+  brightness: ThemeBrightness.light,
+  primarySwatch: Colors.blue
+);
 
+class TestAppState extends State<TestApp> {
   TestApp() {
     _testBed = new TestBed(_labelTexts[_selectedLine]);
   }
@@ -46,22 +52,17 @@ class TestApp extends App {
     "Rocket Trail"
   ];
 
-  Widget build() {
-    ThemeData theme = new ThemeData(
-      brightness: ThemeBrightness.light,
-      primarySwatch: Colors.blue
-    );
-
-    return new Theme(
-      data: theme,
-      child: new Title(
-        title: 'EffectLine Demo',
-        child: _buildColumn()
-      )
+  Widget build(BuildContext context) {
+    return new App(
+      title: 'EffectLine Demo',
+      theme: _theme,
+      routes: {
+        '/': _buildColumn
+      }
     );
   }
 
-  Column _buildColumn() {
+  Column _buildColumn(NavigatorState navigator, Route route) {
     return new Column([
       new Flexible(child: _buildSpriteWidget()),
       _buildTabBar()

examples/game/lib/main.dart

@@ -8,7 +8,7 @@ import 'package:sky/material.dart';
 import 'package:sky/painting.dart';
 import 'package:sky/rendering.dart';
 import 'package:sky/services.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/widgets_next.dart';
 import 'package:skysprites/skysprites.dart';
 
 import 'game_demo.dart';
@@ -24,7 +24,6 @@ final AssetBundle _bundle = _initBundle();
 ImageMap _imageMap;
 SpriteSheet _spriteSheet;
 SpriteSheet _spriteSheetUI;
-GameDemoApp _app;
 Map<String,SoundEffect> _sounds = {};
 
 main() async {
@@ -58,55 +57,42 @@ main() async {
   json = await _bundle.loadString('assets/game_ui.json');
   _spriteSheetUI = new SpriteSheet(_imageMap['assets/game_ui.png'], json);
 
-  _app = new GameDemoApp();
-
   assert(_spriteSheet.image != null);
 
   SoundTrackPlayer stPlayer = SoundTrackPlayer.sharedInstance();
   SoundTrack music = await stPlayer.load(_bundle.load('assets/temp_music.aac'));
   stPlayer.play(music);
 
-  runApp(_app);
+  runApp(new GameDemo());
 }
 
-class GameDemoApp extends App {
+// TODO(viktork): The task bar purple is the wrong purple, we may need
+// a custom theme swatch to match the purples in the sprites.
+final ThemeData _theme = new ThemeData(
+  brightness: ThemeBrightness.light,
+  primarySwatch: Colors.purple
+);
+
+class GameDemo extends StatefulComponent {
+  GameDemoState createState() => new GameDemoState();
+}
 
-  NavigationState _navigationState;
+class GameDemoState extends State<GameDemo> {
   NodeWithSize _game;
   int _lastScore = 0;
 
-  void initState() {
-    _navigationState = new NavigationState([
-      new Route(
-        name: '/',
-        builder: _buildMainScene
-      ),
-      new Route(
-        name: '/game',
-        builder: _buildGameScene
-      ),
-    ]);
-    super.initState();
-  }
-
-  Widget build() {
-    // TODO(viktork): The task bar purple is the wrong purple, we may need
-    // a custom theme swatch to match the purples in the sprites.
-    ThemeData theme = new ThemeData(
-      brightness: ThemeBrightness.light,
-      primarySwatch: Colors.purple
-    );
-
-    return new Theme(
-      data: theme,
-      child: new Title(
-        title: 'Asteroids',
-        child: new Navigator(_navigationState)
-      )
+  Widget build(BuildContext context) {
+    return new App(
+      title: 'Asteroids',
+      theme: _theme,
+      routes: {
+        '/': _buildMainScene,
+        '/game': _buildGameScene
+      }
     );
   }
 
-  Widget _buildGameScene(navigator, route) {
+  Widget _buildGameScene(NavigatorState navigator, Route route) {
     return new SpriteWidget(_game, SpriteBoxTransformMode.fixedWidth);
   }
 
@@ -144,7 +130,7 @@ class GameDemoApp extends App {
   }
 }
 
-class TextureButton extends ButtonBase {
+class TextureButton extends StatefulComponent {
   TextureButton({
     Key key,
     this.onPressed,
@@ -160,41 +146,46 @@ class TextureButton extends ButtonBase {
   final double width;
   final double height;
 
-  Widget buildContent() {
+  TextureButtonState createState() => new TextureButtonState();
+}
+
+class TextureButtonState extends ButtonState<TextureButton> {
+  Widget buildContent(BuildContext context) {
     return new Listener(
       child: new Container(
-        width: width,
-        height: height,
+        width: config.width,
+        height: config.height,
         child: new CustomPaint(
           callback: paintCallback,
           token: new _TextureButtonToken(
             highlight,
-            texture,
-            textureDown,
-            width,
-            height
+            config.texture,
+            config.textureDown,
+            config.width,
+            config.height
           )
         )
       ),
       onPointerUp: (_) {
-        if (onPressed != null) onPressed();
+        if (config.onPressed != null)
+          config.onPressed();
       }
     );
   }
 
   void paintCallback(PaintingCanvas canvas, Size size) {
-    if (texture == null)
+    if (config.texture == null)
       return;
 
     canvas.save();
-    if (highlight && textureDown != null) {
+    if (highlight && config.textureDown != null) {
       // Draw down state
-      canvas.scale(size.width / textureDown.size.width, size.height / textureDown.size.height);
-      textureDown.drawTexture(canvas, Point.origin, new Paint());
+      canvas.scale(size.width / config.textureDown.size.width, size.height / config.textureDown.size.height);
+      config.textureDown.drawTexture(canvas, Point.origin, new Paint());
     } else {
       // Draw up state
-      canvas.scale(size.width / texture.size.width, size.height / texture.size.height);
-      texture.drawTexture(canvas, Point.origin, new Paint());
+      canvas.scale(size.width / config.texture.size.width, size.height / config.texture.size.height);
+      config.texture.drawTexture(canvas, Point.origin, new Paint());
     }
     canvas.restore();
   }

examples/game/test_drawatlas.dart

@@ -3,7 +3,7 @@ import 'dart:sky';
 import 'package:sky/material.dart';
 import 'package:sky/rendering.dart';
 import 'package:sky/services.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/widgets_next.dart';
 import 'package:skysprites/skysprites.dart';
 
 AssetBundle _initBundle() {
@@ -16,7 +16,11 @@ final AssetBundle _bundle = _initBundle();
 
 ImageMap _images;
 SpriteSheet _spriteSheet;
-TestDrawAtlasApp _app;
+
+final ThemeData _theme = new ThemeData(
+  brightness: ThemeBrightness.light,
+  primarySwatch: Colors.purple
+);
 
 main() async {
   _images = new ImageMap(_bundle);
@@ -28,29 +32,18 @@ main() async {
   String json = await _bundle.loadString('assets/sprites.json');
   _spriteSheet = new SpriteSheet(_images['assets/sprites.png'], json);
 
-  _app = new TestDrawAtlasApp();
-  runApp(_app);
-}
-
-class TestDrawAtlasApp extends App {
-
-  Widget build() {
-    ThemeData theme = new ThemeData(
-      brightness: ThemeBrightness.light,
-      primarySwatch: Colors.purple
-    );
-
-    return new Theme(
-      data: theme,
-      child: new Title(
-        title: 'Test drawAtlas',
-        child: new SpriteWidget(
+  runApp(new App(
+    title: 'Test drawAtlas',
+    theme: _theme,
+    routes: {
+      '/': (NavigatorState navigator, Route route) {
+        return new SpriteWidget(
           new TestDrawAtlas(),
           SpriteBoxTransformMode.fixedWidth
-        )
-      )
-    );
-  }
+        );
+      }
+    }
+  ));
 }
 
 class TestDrawAtlas extends NodeWithSize {

examples/game/test_performance.dart

@@ -4,7 +4,7 @@ import 'dart:math' as math;
 import 'package:sky/material.dart';
 import 'package:sky/rendering.dart';
 import 'package:sky/services.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/widgets_next.dart';
 import 'package:skysprites/skysprites.dart';
 
 AssetBundle _initBundle() {
@@ -17,7 +17,11 @@ final AssetBundle _bundle = _initBundle();
 
 ImageMap _images;
 SpriteSheet _spriteSheet;
-TestApp _app;
+
+final ThemeData _theme = new ThemeData(
+  brightness: ThemeBrightness.light,
+  primarySwatch: Colors.purple
+);
 
 main() async {
   _images = new ImageMap(_bundle);
@@ -29,26 +33,15 @@ main() async {
   String json = await _bundle.loadString('assets/sprites.json');
   _spriteSheet = new SpriteSheet(_images['assets/sprites.png'], json);
 
-  _app = new TestApp();
-  runApp(_app);
-}
-
-class TestApp extends App {
-
-  Widget build() {
-    ThemeData theme = new ThemeData(
-      brightness: ThemeBrightness.light,
-      primarySwatch: Colors.purple
-    );
-
-    return new Theme(
-      data: theme,
-      child: new Title(
-        title: 'Test Sprite Performance',
-        child: new SpriteWidget(new TestPerformance())
-      )
-    );
-  }
+  runApp(new App(
+    title: 'Test Sprite Performance',
+    theme: _theme,
+    routes: {
+      '/': (NavigatorState navigator, RouteState route) {
+        return new SpriteWidget(new TestPerformance());
+      }
+    }
+  ));
 }
 
 class TestPerformance extends NodeWithSize {

packages/flutter_sprites/lib/skysprites.dart

@@ -16,7 +16,7 @@ import 'package:sky/animation.dart';
 import 'package:sky/painting.dart';
 import 'package:sky/rendering.dart';
 import 'package:sky/services.dart';
-import 'package:sky/widgets.dart';
+import 'package:sky/widgets_next.dart';
 import 'package:vector_math/vector_math.dart';
 
 part 'action.dart';

packages/flutter_sprites/lib/sprite_widget.dart

 part of skysprites;
 
 /// A widget that uses a [SpriteBox] to render a sprite node tree to the screen.
-class SpriteWidget extends OneChildRenderObjectWrapper {
+class SpriteWidget extends OneChildRenderObjectWidget {
 
   /// The rootNode of the sprite node tree.
   ///
@@ -24,13 +24,9 @@ class SpriteWidget extends OneChildRenderObjectWrapper {
   ///     var mySpriteWidget = new SpriteWidget(mySpriteTree, SpriteBoxTransformMode.fixedHeight);
   SpriteWidget(this.rootNode, [this.transformMode = SpriteBoxTransformMode.letterbox]);
 
-  SpriteBox get renderObject => super.renderObject;
-
-  SpriteBox createNode() => new SpriteBox(rootNode, transformMode);
-
-  void syncRenderObject(SpriteWidget old) {
-    super.syncRenderObject(old);
+  SpriteBox createRenderObject() => new SpriteBox(rootNode, transformMode);
 
+  void updateRenderObject(SpriteBox renderObject, SpriteWidget oldWidget) {
     renderObject.rootNode = rootNode;
     renderObject.transformMode = transformMode;
   }