commit 290a7745dacac5b90be58b63fe103c571f098902
author Alex Fandrianto <alexfandrianto@google.com> Wed Aug 12 18:46:15 2015 -0700
committer Alex Fandrianto <alexfandrianto@google.com> Fri Aug 21 11:27:08 2015 -0700
tree 6f30959f78d025386efaf38a30517e9661bb44b0
parent 13f8578116a3297059647ad359de8ac4fe23dde5

This shows a flexbox with a card inside, but I think Stack is what we
want in the end.
Block makes things too wide. Flex makes things too... horizontal/vertical.
I just want Stack so that I can control every item's position.
(Or is that too much?)

lib/card.dart

diff --git a/lib/card.dart b/lib/card.dart
index 51bfea5..ab0b11d 100644
--- a/lib/card.dart
+++ b/lib/card.dart
@@ -29,6 +29,7 @@
   double dx;
   double dy;
   bool faceUp;
+  bool scrolling;
 
   final Card card;
   final Function pointerUpCb;
@@ -42,6 +43,7 @@
     this.faceUp = faceUp;
     dx = 0.0;
     dy = 0.0;
+    scrolling = false;
   }
 
   void syncFields(CardComponent other) {
@@ -56,6 +58,12 @@
     });
   }
 
+  void _onPointerDown(sky.Event e) {
+    setState(() {
+      scrolling = true;
+    });
+  }
+
   void _onPointerMove(sky.Event e) {
     sky.GestureEvent ge = e as sky.GestureEvent;
     setState(() {
@@ -68,25 +76,32 @@
     //sky.PointerEvent pe = e as sky.PointerEvent;
     setState(() {
       if (this.pointerUpCb != null) {
-        //TODO(alexfandrianto): Left off here!!! MISSING SEMICOLON
         pointerUpCb(this.dx, this.dy, this.faceUp);
       }
       this.dx = 0.0;
       this.dy = 0.0;
       this.faceUp = true;
+      scrolling = false;
     });
   }
 
   Widget build() {
-    return new Transform(
-      child: new MyButton(
-        child: imageFromCard(this.card, faceUp),
-        onPressed: _onPressed,
-        //onPointerDown: _onPointerDown,
-        onPointerMove: _onPointerMove,
-        onPointerUp: _onPointerUp
+    return new Container(
+      child: /*new Container(
+        child: */new MyButton(
+          child: imageFromCard(this.card, faceUp),
+          onPressed: _onPressed,
+          onPointerDown: _onPointerDown,
+          onPointerMove: _onPointerMove,
+          onPointerUp: _onPointerUp
+        ),
+      //padding: const EdgeDims.all(8.0),
+      //margin: const EdgeDims.symmetric(horizontal: 8.0),
+      decoration: new BoxDecoration(
+        backgroundColor: (this.scrolling ? const Color(0xFFFF0000) : const Color(0xFF0000FF)),
+        borderRadius: 5.0
       ),
-      transform: new vector_math.Matrix4.identity().translate(-dx, dy)
+      transform: new vector_math.Matrix4.identity().translate(dx, dy)
     );
   }
 }

lib/main.dart

diff --git a/lib/main.dart b/lib/main.dart
index 66a540c..6db808f 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -68,7 +68,7 @@
   }
 
   Widget build() {
-    return new Center(child: new Block([
+    return new Center(child: new Flex([
       new Center(child: new Text('Hello, world!')),
       new Center(child: new Text('Tap #${counter}: ${debug}')),
       new Center(child: new Text('Scroll #${counter2}: (${dx.toStringAsFixed(3)}, ${dy.toStringAsFixed(3)})')),
@@ -76,7 +76,7 @@
       new Center(child: new MyToolBar()),
       makeTransform(),
       new CardComponent(c, true)
-    ]));
+    ], direction: FlexDirection.vertical));
   }
 }
 

lib/my_button.dart

diff --git a/lib/my_button.dart b/lib/my_button.dart
index 9a12737..c04bf97 100644
--- a/lib/my_button.dart
+++ b/lib/my_button.dart
@@ -20,9 +20,9 @@
 
   Container makeContainer() {
     return new Container(
-      height: 36.0,
-      padding: const EdgeDims.all(8.0),
-      margin: const EdgeDims.symmetric(horizontal: 8.0),
+      //height: 36.0,
+      //padding: const EdgeDims.all(8.0),
+      //margin: const EdgeDims.symmetric(horizontal: 8.0),
       decoration: _decoration,
       child: new Center(
         child: this.child