diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e6f35f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+packages
+.packages
+pubspec.lock
diff --git a/lib/main.dart b/lib/main.dart
new file mode 100644
index 0000000..18790b9
--- /dev/null
+++ b/lib/main.dart
@@ -0,0 +1,124 @@
+import 'package:sky/widgets/basic.dart';
+
+import 'my_button.dart';
+import 'dart:sky' as sky;
+import 'package:vector_math/vector_math.dart' as vector_math;
+
+class HelloWorldApp extends App {
+  int counter = 0;
+  String debug = '';
+  int counter2 = 0;
+  // String debug2 = '';
+  // Accumulators for the current scroll.
+  double dx = 0.0;
+  double dy = 0.0;
+
+  Transform makeTransform() {
+    return new Transform(
+      child: new MyButton(
+        child: new Text('Engage'),
+        onPressed: _handleOnPressedCallback,
+        onScrollStart: _handleOnScrollStartCallback,
+        onScrollUpdate: _handleOnScrollUpdateCallback
+      ),
+      transform: new vector_math.Matrix4.identity().translate(-dx, dy)
+    );
+  }
+
+  void _handleOnPressedCallback(sky.Event e) {
+    setState(() {
+      counter++;
+      sky.GestureEvent ge = e as sky.GestureEvent;
+      debug = '(${ge.x.toStringAsFixed(3)}, ${ge.y.toStringAsFixed(3)})';//ge.toString();
+    });
+  }
+
+  void _handleOnScrollStartCallback(sky.Event e) {
+    setState(() {
+      counter2++;
+      //dx = 0.0;
+      //dy = 0.0;
+      //sky.GestureEvent ge = e as sky.GestureEvent;
+      //debug2 = '${ge.x} ${ge.y}';
+      // The field names were found from here: https://github.com/domokit/sky_engine/blob/01ff5c383fc88647c08f11a0d3392238b8bc99de/sky/engine/core/events/GestureEvent.h
+      //'${ge.x} ${ge.y}';
+      //'${ge.dx} ${ge.dy}'; I didn't see this on scroll either though... T_T
+      //'${ge.velocityX} ${ge.velocityY}'; Is this for fling?
+    });
+  }
+
+  void _handleOnScrollUpdateCallback(sky.Event e) {
+    setState(() {
+      sky.GestureEvent ge = e as sky.GestureEvent;
+      dx += ge.dx;
+      dy += ge.dy;
+      // debug3 = '${ge.dx} ${ge.dy}'; // Was this one for scroll update then?
+      // The field names were found from here: https://github.com/domokit/sky_engine/blob/01ff5c383fc88647c08f11a0d3392238b8bc99de/sky/engine/core/events/GestureEvent.h
+      //'${ge.x} ${ge.y}';
+      //'${ge.dx} ${ge.dy}'; I didn't see this on scroll either though... T_T
+      //'${ge.velocityX} ${ge.velocityY}'; Is this for fling?
+
+      //this.rt.transform.translate(ge.dx, ge.dy);
+      //this.rt.setIdentity();
+      //this.translate(dx, dy);
+    });
+  }
+
+  Widget build() {
+    return new Center(child: new Block([
+      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)})')),
+      new Center(child: new Text('We did it!')),
+      new Center(child: new MyToolBar()),
+      makeTransform()
+    ]));
+  }
+}
+
+void main() {
+  runApp(new HelloWorldApp());
+}
+
+/*import 'package:sky/widgets/basic.dart';
+
+
+class DemoApp extends App {
+  Widget build() {
+    return new Center(child: new MyToolBar());
+  }
+}
+
+void main() {
+  runApp(new DemoApp());
+}*/
+
+class MyToolBar extends Component {
+  Widget build() {
+    return new Container(
+      decoration: const BoxDecoration(
+        backgroundColor: const Color(0xFF00FFFF)
+      ),
+      height: 56.0,
+      padding: const EdgeDims.symmetric(horizontal: 8.0),
+      child: new Flex([
+        new NetworkImage(src: 'menu.png', width: 25.0, height: 25.0),
+        new Flexible(child: new Text('My awesome toolbar')),
+        new NetworkImage(src: 'search.png', width: 25.0, height: 25.0),
+      ])
+    );
+  }
+}
+
+// A component must build its widget in order to be a Widget.
+// Widgets, however, just are what they are.
+// Everything extends off Widget, but some are Component and some aren't, like
+// the RenderObjectWrapper's. How do they manage to draw themselves? syncChild is the thing that is generally called.
+
+// sky/widgets/basic.dart has all of these...
+// So if I want to position something on my own... I could use Padding/Center in terms of widgets.
+// But which one takes a Point or Offset?
+// Hm... So I think we want to just position, we could use a Container or Transform
+// Transform uses a matrix4 which is really inconvenient...
+// new Matrix4.identity().scale? .rotate? .translate?
+// RenderTransform works too instead of Transform. I guess.
\ No newline at end of file
diff --git a/lib/menu.png b/lib/menu.png
new file mode 100644
index 0000000..38ee213
--- /dev/null
+++ b/lib/menu.png
Binary files differ
diff --git a/lib/my_button.dart b/lib/my_button.dart
new file mode 100644
index 0000000..132a141
--- /dev/null
+++ b/lib/my_button.dart
@@ -0,0 +1,56 @@
+import 'package:sky/widgets/basic.dart';
+
+final BoxDecoration _decoration = new BoxDecoration(
+  backgroundColor: const Color(0xFFFF00FF),
+  borderRadius: 5.0/*,
+  gradient: new LinearGradient(
+    endPoints: [ Point.origin, const Point(0.0, 36.0) ],
+    colors: [ const Color(0xFFEEEEEE), const Color(0xFFCCCCCC) ]
+  )*/
+);
+
+class MyButton extends Component {
+  final Widget child;
+  final Function onPressed;
+  final Function onScrollStart;
+  final Function onScrollUpdate;
+
+  MyButton({this.child, this.onPressed, this.onScrollStart, this.onScrollUpdate});
+
+  Container makeContainer() {
+    return new Container(
+      height: 36.0,
+      padding: const EdgeDims.all(8.0),
+      margin: const EdgeDims.symmetric(horizontal: 8.0),
+      decoration: _decoration,
+      child: new Center(
+        child: this.child
+      )
+    );
+  }
+
+  Widget build() {
+    return new Listener(
+      // Listeners have these possibly fields https://github.com/domokit/sky_engine/blob/2e8843893b9c1cef0f0f9d9e00d384fca7a70d23/sky/packages/sky/lib/widgets/framework.dart
+      onGestureTap: (e) {
+        print('MyButton was tapped!');
+        if (this.onPressed != null) {
+          this.onPressed(e);
+        }
+      },
+      onGestureScrollStart: (e) {
+        print('MyButton was scrolled!');
+        if (this.onScrollStart != null) {
+          this.onScrollStart(e);
+        }
+      },
+      onGestureScrollUpdate: (e) {
+        print('MyButton continues to be scrolled!');
+        if (this.onScrollUpdate != null) {
+          this.onScrollUpdate(e);
+        }
+      },
+      child: makeContainer()
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/search.png b/lib/search.png
new file mode 100644
index 0000000..9c81036
--- /dev/null
+++ b/lib/search.png
Binary files differ
diff --git a/pubspec.yaml b/pubspec.yaml
new file mode 100644
index 0000000..ef1200b
--- /dev/null
+++ b/pubspec.yaml
@@ -0,0 +1,4 @@
+name: your_app_name
+dependencies:
+  sky: any
+  sky_tools: any