Implement radio button for Sky’s fn2

sky/sdk/lib/framework/components2/radio.dart

Index: sky/sdk/lib/framework/components2/radio.dart
diff --git a/sky/sdk/lib/framework/components2/radio.dart b/sky/sdk/lib/framework/components2/radio.dart
index b065dfe87f222897dd66a73dce899e4f1a2d7117..33d4fb2e26c54d174e95f01fbed120d93c586dc6 100644
--- a/sky/sdk/lib/framework/components2/radio.dart
+++ b/sky/sdk/lib/framework/components2/radio.dart
@@ -2,7 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:sky/framework/theme2/colors.dart' as colors;
+
+import 'dart:sky' as sky;
 import '../fn2.dart';
+import '../rendering/box.dart';
+import '../rendering/object.dart';
 import 'button_base.dart';
 import 'ink_well.dart';
 
@@ -13,31 +18,6 @@ class Radio extends ButtonBase {
   Object groupValue;
   ValueChanged onChanged;
 
-  static final Style _style = new Style('''
-    width: 14px;
-    height: 14px;
-    border-radius: 7px;
-    border: 1px solid blue;
-    margin: 0 5px;'''
-  );
-
-  static final Style _highlightStyle = new Style('''
-    width: 14px;
-    height: 14px;
-    border-radius: 7px;
-    border: 1px solid blue;
-    margin: 0 5px;
-    background-color: orange;'''
-  );
-
-  static final Style _dotStyle = new Style('''
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: black;
-    margin: 2px;'''
-  );
-
   Radio({
     Object key,
     this.onChanged,
@@ -46,12 +26,32 @@ class Radio extends ButtonBase {
   }) : super(key: key);
 
   UINode buildContent() {
+    // TODO(jackson): This should change colors with the theme
+    sky.Color color = highlight ? colors.Purple[500] : const sky.Color(0x8A000000);
+    const double diameter = 16.0;
+    const double outerRadius = diameter / 2;
+    const double innerRadius = 5.0;
     return new EventListenerNode(
-      new StyleNode(
-        new InkWell(
-          children: value == groupValue ? [new Container(style: _dotStyle)] : []
-        ),
-        highlight ? _highlightStyle : _style
+      new Container(
+        margin: const EdgeDims.symmetric(horizontal: 5.0),
+        desiredSize: new sky.Size(diameter, diameter),
+        child: new CustomPaint(
+          callback: (RenderObjectDisplayList canvas) {
+
+            sky.Paint paint = new sky.Paint()..color = color;
+
+            // Draw the outer circle
+            paint.style = 1; // SkPaint::STROKE_STYLE;
+            paint.strokeWidth = 2.0;
+            canvas.drawCircle(outerRadius, outerRadius, outerRadius, paint);
+
+            // Draw the inner circle
+            if (value == groupValue) {
+              paint.style = 0; // SkPaint::FILL_STYLE;
+              canvas.drawCircle(outerRadius, outerRadius, innerRadius, paint);
+            }
+          }
+        )
       ),
       onGestureTap: _handleClick
     );