Port ensure_visible.dart to fn3.

This concludes the fn3 port!

examples/widgets/ensure_visible.dart.old → examples/widgets/ensure_visible.dart

@@ -13,17 +13,57 @@ class CardModel {
   Key get key => new ObjectKey(this);
 }
 
-class EnsureVisibleApp extends MaterialApp {
+typedef void TappableCardCallback(BuildContext context);
 
-  static const TextStyle cardLabelStyle =
-    const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
+class TappableCard extends StatelessComponent {
+  TappableCard({ CardModel cardModel, this.selected, this.onTap })
+    : cardModel = cardModel, super(key: cardModel.key);
+  final CardModel cardModel;
+  final bool selected;
+  final TappableCardCallback onTap;
 
-  static const TextStyle selectedCardLabelStyle =
-    const TextStyle(color: Colors.white, fontSize: 24.0, fontWeight: bold);
+  static const TextStyle cardLabelStyle = const TextStyle(
+    color: Colors.white,
+    fontSize: 18.0,
+    fontWeight: bold
+  );
+
+  static const TextStyle selectedCardLabelStyle = const TextStyle(
+    color: Colors.white,
+    fontSize: 24.0,
+    fontWeight: bold
+  );
+
+  Widget build(BuildContext context) {
+    return new GestureDetector(
+      onTap: () => onTap(context),
+      child: new Card(
+        color: cardModel.color,
+        child: new Container(
+          height: cardModel.height,
+          padding: const EdgeDims.all(8.0),
+          child: new Center(
+            child: new Text(
+              cardModel.label,
+              style: selected ? selectedCardLabelStyle : cardLabelStyle
+            )
+          )
+        )
+      )
+    );
+  }
+
+}
+
+
+class EnsureVisibleApp extends StatefulComponent {
+  EnsureVisibleAppState createState() => new EnsureVisibleAppState();
+}
+
+class EnsureVisibleAppState extends State<EnsureVisibleApp> {
 
   List<CardModel> cardModels;
-  MixedViewportLayoutState layoutState = new MixedViewportLayoutState();
-  CardModel selectedCardModel;
+  int selectedCardIndex;
 
   void initState() {
     List<double> cardHeights = <double>[
@@ -31,52 +71,29 @@ class EnsureVisibleApp extends MaterialApp {
       48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0,
       48.0, 63.0, 82.0, 146.0, 60.0, 55.0, 84.0, 96.0, 50.0
     ];
-    cardModels = new List.generate(cardHeights.length, (i) {
+    cardModels = new List<CardModel>.generate(cardHeights.length, (int i) {
       Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardHeights.length);
       return new CardModel(i, cardHeights[i], color);
     });
-
     super.initState();
   }
 
-  void handleTap(Widget card, CardModel cardModel) {
-    ensureWidgetIsVisible(card, duration: const Duration(milliseconds: 200))
+  Widget builder(BuildContext context, int index) {
+    if (index >= cardModels.length)
+      return null;
+    return new TappableCard(
+      cardModel: cardModels[index],
+      selected: index == selectedCardIndex,
+      onTap: (BuildContext context) {
+        ensureWidgetIsVisible(context, duration: const Duration(milliseconds: 200))
         .then((_) {
-      setState(() { selectedCardModel = cardModel; });
+          setState(() { selectedCardIndex = index; });
         });
       }
-
-  Widget builder(int index) {
-    if (index >= cardModels.length)
-      return null;
-    CardModel cardModel = cardModels[index];
-    TextStyle style = (cardModel == selectedCardModel) ? selectedCardLabelStyle : cardLabelStyle;
-    Widget card = new Card(
-      color: cardModel.color,
-      child: new Container(
-        height: cardModel.height,
-        padding: const EdgeDims.all(8.0),
-        child: new Center(child: new Text(cardModel.label, style: style))
-      )
-    );
-    return new GestureDetector(
-      key: cardModel.key,
-      onTap: () => handleTap(card, cardModel),
-      child: card
     );
   }
 
-  Widget build() {
-    Widget cardCollection = new Container(
-      padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
-      decoration: new BoxDecoration(backgroundColor: Theme.of(this).primarySwatch[50]),
-      child: new ScrollableMixedWidgetList(
-        builder: builder,
-        token: cardModels.length,
-        layoutState: layoutState
-      )
-    );
-
+  Widget build(BuildContext context) {
     return new IconTheme(
       data: const IconThemeData(color: IconThemeColor.white),
       child: new Theme(
@@ -88,8 +105,15 @@ class EnsureVisibleApp extends MaterialApp {
         child: new Title(
           title: 'Cards',
           child: new Scaffold(
-            toolBar: new ToolBar(center: new Text('Tap a Card')),
-            body: cardCollection
+            toolBar: new ToolBar(center: new Text('Tap a card, any card')),
+            body: new Container(
+              padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
+              decoration: new BoxDecoration(backgroundColor: Theme.of(context).primarySwatch[50]),
+              child: new ScrollableMixedWidgetList(
+                builder: builder,
+                token: cardModels.length
+              )
+            )
           )
         )
       )

packages/unit/test/widget/input_test.dart

@@ -105,7 +105,6 @@ void main() {
   test('Selection remains valid', () {
     testWidgets((WidgetTester tester) {
       GlobalKey inputKey = new GlobalKey();
-      String inputValue;
 
       Widget builder() {
         return new Center(