Make BoxDecoration replaceable.

Factor out a reusable interface called Decoration from BoxDecoration.

Make all the consumers of BoxDecoration and the erstwhile BoxPainter
into consumers of Decoration.

Make a BoxPainter be something you get from a Decoration, rather than
something to which you pass a BoxDecoration.

Rename Shape to BoxShape now that it's documented specifically as
applying to boxes.

Move EdgeDims to its own file.

Move FractionalOffset up so that it's with the other helper classes in
its file rather than alone at the end.

Minor change to RenderClipOval's hit testing to avoid taking an
unnecessary square root.

Rename BoxDecorationPosition to DecorationPosition since
RenderDecoratedBox now takes any Decoration.

Implement hit testing for rounded rects.

Rename AnimatedBoxDecorationValue to AnimatedDecorationValue, and make
it support lerping across any Decoration (by deferring to the objects
involved).

examples/widgets/drag_and_drop.dart

@@ -50,7 +50,7 @@ class Dot extends StatelessComponent {
       height: size,
       decoration: new BoxDecoration(
         backgroundColor: color,
-        shape: Shape.circle
+        shape: BoxShape.circle
       ),
       child: child
     );

examples/widgets/horizontal_scrolling.dart

@@ -14,7 +14,7 @@ class Circle extends StatelessComponent {
       width: 50.0,
       margin: margin + new EdgeDims.symmetric(horizontal: 2.0),
       decoration: new BoxDecoration(
-        shape: Shape.circle,
+        shape: BoxShape.circle,
         backgroundColor: const Color(0xFF00FF00)
       )
     );

packages/flutter/lib/painting.dart

@@ -15,6 +15,8 @@ library painting;
 export 'src/painting/basic_types.dart';
 export 'src/painting/box_painter.dart';
 export 'src/painting/colors.dart';
+export 'src/painting/decoration.dart';
+export 'src/painting/edge_dims.dart';
 export 'src/painting/shadows.dart';
 export 'src/painting/text_painter.dart';
 export 'src/painting/text_style.dart';

packages/flutter/lib/src/material/circle_avatar.dart

@@ -35,7 +35,7 @@ class CircleAvatar extends StatelessComponent {
       duration: kThemeChangeDuration,
       decoration: new BoxDecoration(
         backgroundColor: color,
-        shape: Shape.circle
+        shape: BoxShape.circle
       ),
       width: 40.0,
       height: 40.0,

packages/flutter/lib/src/material/date_picker.dart

@@ -226,7 +226,7 @@ class DayPicker extends StatelessComponent {
             selectedDate.day == day)
           decoration = new BoxDecoration(
             backgroundColor: theme.primarySwatch[100],
-            shape: Shape.circle
+            shape: BoxShape.circle
           );
 
         // Use a different font color for the current day
@@ -377,7 +377,7 @@ class _YearPickerState extends ScrollableWidgetListState<YearPicker> {
           height: config.itemExtent,
           decoration: year == config.selectedDate.year ? new BoxDecoration(
             backgroundColor: Theme.of(context).primarySwatch[100],
-            shape: Shape.circle
+            shape: BoxShape.circle
           ) : null,
           child: new Center(
             child: new Text(label, style: style)

packages/flutter/lib/src/material/dropdown.dart

@@ -37,11 +37,11 @@ class _DropDownMenuPainter extends CustomPainter {
   final RenderBox renderBox;
 
   void paint(Canvas canvas, Size size) {
-    final BoxPainter painter = new BoxPainter(new BoxDecoration(
+    final BoxPainter painter = new BoxDecoration(
       backgroundColor: color,
       borderRadius: 2.0,
       boxShadow: elevationToShadow[elevation]
-    ));
+    ).createBoxPainter();
 
     double top = renderBox.globalToLocal(new Point(0.0, menuTop)).y;
     double bottom = renderBox.globalToLocal(new Point(0.0, menuBottom)).y;

packages/flutter/lib/src/material/ink_well.dart

@@ -18,7 +18,7 @@ class InkResponse extends StatefulComponent {
     this.onLongPress,
     this.onHighlightChanged,
     this.containedInWell: false,
-    this.highlightShape: Shape.circle
+    this.highlightShape: BoxShape.circle
   }) : super(key: key);
 
   final Widget child;
@@ -27,7 +27,7 @@ class InkResponse extends StatefulComponent {
   final GestureLongPressCallback onLongPress;
   final ValueChanged<bool> onHighlightChanged;
   final bool containedInWell;
-  final Shape highlightShape;
+  final BoxShape highlightShape;
 
   _InkResponseState createState() => new _InkResponseState<InkResponse>();
 }
@@ -170,6 +170,6 @@ class InkWell extends InkResponse {
     onLongPress: onLongPress,
     onHighlightChanged: onHighlightChanged,
     containedInWell: true,
-    highlightShape: Shape.rectangle
+    highlightShape: BoxShape.rectangle
   );
 }

packages/flutter/lib/src/material/material.dart

@@ -65,7 +65,7 @@ abstract class MaterialInkController {
   InkSplash splashAt({ RenderBox referenceBox, Point position, Color color, bool containedInWell, VoidCallback onRemoved });
 
   /// Begin a highlight, coincident with the referenceBox.
-  InkHighlight highlightAt({ RenderBox referenceBox, Color color, Shape shape: Shape.rectangle, VoidCallback onRemoved });
+  InkHighlight highlightAt({ RenderBox referenceBox, Color color, BoxShape shape: BoxShape.rectangle, VoidCallback onRemoved });
 
   /// Add an arbitrary InkFeature to this InkController.
   void addInkFeature(InkFeature feature);
@@ -153,7 +153,7 @@ class _MaterialState extends State<Material> {
           backgroundColor: backgroundColor,
           borderRadius: kMaterialEdges[config.type],
           boxShadow: config.elevation == 0 ? null : elevationToShadow[config.elevation],
-          shape: config.type == MaterialType.circle ? Shape.circle : Shape.rectangle
+          shape: config.type == MaterialType.circle ? BoxShape.circle : BoxShape.rectangle
         ),
         child: contents
       );
@@ -217,7 +217,7 @@ class RenderInkFeatures extends RenderProxyBox implements MaterialInkController
   InkHighlight highlightAt({
     RenderBox referenceBox,
     Color color,
-    Shape shape: Shape.rectangle,
+    BoxShape shape: BoxShape.rectangle,
     VoidCallback onRemoved
   }) {
     _InkHighlight highlight = new _InkHighlight(
@@ -423,7 +423,7 @@ class _InkHighlight extends InkFeature implements InkHighlight {
     renderer.markNeedsPaint();
   }
 
-  final Shape shape;
+  final BoxShape shape;
 
   bool get active => _active;
   bool _active = true;
@@ -452,7 +452,7 @@ class _InkHighlight extends InkFeature implements InkHighlight {
   }
 
   void _paintHighlight(Canvas canvas, Rect rect, paint) {
-    if (shape == Shape.rectangle)
+    if (shape == BoxShape.rectangle)
       canvas.drawRect(rect, paint);
     else
       canvas.drawCircle(rect.center, _kDefaultSplashRadius, paint);

packages/flutter/lib/src/material/switch.dart

@@ -170,7 +170,8 @@ class _RenderSwitch extends RenderToggleable {
     super.handleEvent(event, entry);
   }
 
-  final BoxPainter _thumbPainter = new BoxPainter(const BoxDecoration());
+  Color _cachedThumbColor;
+  BoxPainter _thumbPainter;
 
   void paint(PaintingContext context, Offset offset) {
     final Canvas canvas = context.canvas;
@@ -200,11 +201,14 @@ class _RenderSwitch extends RenderToggleable {
 
     paintRadialReaction(canvas, thumbOffset);
 
-    _thumbPainter.decoration = new BoxDecoration(
+    if (_cachedThumbColor != thumbColor) {
+      _thumbPainter = new BoxDecoration(
         backgroundColor: thumbColor,
-      shape: Shape.circle,
+        shape: BoxShape.circle,
         boxShadow: elevationToShadow[1]
-    );
+      ).createBoxPainter();
+      _cachedThumbColor = thumbColor;
+    }
 
     // The thumb contracts slightly during the animation
     double inset = 2.0 - (position.value - 0.5).abs() * 2.0;

packages/flutter/lib/src/painting/box_painter.dart

@@ -8,150 +8,10 @@ import 'dart:ui' as ui;
 import 'package:flutter/services.dart';
 
 import 'basic_types.dart';
+import 'decoration.dart';
+import 'edge_dims.dart';
 
-/// An immutable set of offsets in each of the four cardinal directions.
-///
-/// Typically used for an offset from each of the four sides of a box. For
-/// example, the padding inside a box can be represented using this class.
-class EdgeDims {
-  /// Constructs an EdgeDims from offsets from the top, right, bottom and left.
-  const EdgeDims.TRBL(this.top, this.right, this.bottom, this.left);
-
-  /// Constructs an EdgeDims where all the offsets are value.
-  const EdgeDims.all(double value)
-      : top = value, right = value, bottom = value, left = value;
-
-  /// Constructs an EdgeDims with only the given values non-zero.
-  const EdgeDims.only({ this.top: 0.0,
-                        this.right: 0.0,
-                        this.bottom: 0.0,
-                        this.left: 0.0 });
-
-  /// Constructs an EdgeDims with symmetrical vertical and horizontal offsets.
-  const EdgeDims.symmetric({ double vertical: 0.0,
-                             double horizontal: 0.0 })
-    : top = vertical, left = horizontal, bottom = vertical, right = horizontal;
-
-  /// The offset from the top.
-  final double top;
-
-  /// The offset from the right.
-  final double right;
-
-  /// The offset from the bottom.
-  final double bottom;
-
-  /// The offset from the left.
-  final double left;
-
-  /// Whether every dimension is non-negative.
-  bool get isNonNegative => top >= 0.0 && right >= 0.0 && bottom >= 0.0 && left >= 0.0;
-
-  /// The size that this edge dims would occupy with an empty interior.
-  Size get collapsedSize => new Size(left + right, top + bottom);
-
-  Rect inflateRect(Rect rect) {
-    return new Rect.fromLTRB(rect.left - left, rect.top - top, rect.right + right, rect.bottom + bottom);
-  }
-
-  EdgeDims operator -(EdgeDims other) {
-    return new EdgeDims.TRBL(
-      top - other.top,
-      right - other.right,
-      bottom - other.bottom,
-      left - other.left
-    );
-  }
-
-  EdgeDims operator +(EdgeDims other) {
-    return new EdgeDims.TRBL(
-      top + other.top,
-      right + other.right,
-      bottom + other.bottom,
-      left + other.left
-    );
-  }
-
-  EdgeDims operator *(double other) {
-    return new EdgeDims.TRBL(
-      top * other,
-      right * other,
-      bottom * other,
-      left * other
-    );
-  }
-
-  EdgeDims operator /(double other) {
-    return new EdgeDims.TRBL(
-      top / other,
-      right / other,
-      bottom / other,
-      left / other
-    );
-  }
-
-  EdgeDims operator ~/(double other) {
-    return new EdgeDims.TRBL(
-      (top ~/ other).toDouble(),
-      (right ~/ other).toDouble(),
-      (bottom ~/ other).toDouble(),
-      (left ~/ other).toDouble()
-    );
-  }
-
-  EdgeDims operator %(double other) {
-    return new EdgeDims.TRBL(
-      top % other,
-      right % other,
-      bottom % other,
-      left % other
-    );
-  }
-
-  /// Linearly interpolate between two EdgeDims.
-  ///
-  /// If either is null, this function interpolates from [EdgeDims.zero].
-  static EdgeDims lerp(EdgeDims a, EdgeDims b, double t) {
-    if (a == null && b == null)
-      return null;
-    if (a == null)
-      return b * t;
-    if (b == null)
-      return a * (1.0 - t);
-    return new EdgeDims.TRBL(
-      ui.lerpDouble(a.top, b.top, t),
-      ui.lerpDouble(a.right, b.right, t),
-      ui.lerpDouble(a.bottom, b.bottom, t),
-      ui.lerpDouble(a.left, b.left, t)
-    );
-  }
-
-  /// An EdgeDims with zero offsets in each direction.
-  static const EdgeDims zero = const EdgeDims.TRBL(0.0, 0.0, 0.0, 0.0);
-
-  bool operator ==(dynamic other) {
-    if (identical(this, other))
-      return true;
-    if (other is! EdgeDims)
-      return false;
-    final EdgeDims typedOther = other;
-    return top == typedOther.top &&
-           right == typedOther.right &&
-           bottom == typedOther.bottom &&
-           left == typedOther.left;
-  }
-
-  int get hashCode {
-    int value = 373;
-    value = 37 * value + top.hashCode;
-    value = 37 * value + left.hashCode;
-    value = 37 * value + bottom.hashCode;
-    value = 37 * value + right.hashCode;
-    return value;
-  }
-
-  String toString() => "EdgeDims($top, $right, $bottom, $left)";
-}
+export 'edge_dims.dart' show EdgeDims;
 
 /// A side of a border of a box
 class BorderSide {
@@ -602,7 +462,7 @@ Iterable<Rect> _generateImageTileRects(Rect outputRect, Rect fundamentalRect, Im
   }
 }
 
-/// Paint an image into the given rectangle in the canvas
+/// Paint an image into the given rectangle in the canvas.
 void paintImage({
   Canvas canvas,
   Rect rect,
@@ -697,6 +557,48 @@ void paintImage({
     canvas.restore();
 }
 
+/// An offset that's expressed as a fraction of a Size.
+///
+/// FractionalOffset(1.0, 0.0) represents the top right of the Size,
+/// FractionalOffset(0.0, 1.0) represents the bottom left of the Size,
+class FractionalOffset {
+  const FractionalOffset(this.x, this.y);
+  final double x;
+  final double y;
+  FractionalOffset operator -(FractionalOffset other) {
+    return new FractionalOffset(x - other.x, y - other.y);
+  }
+  FractionalOffset operator +(FractionalOffset other) {
+    return new FractionalOffset(x + other.x, y + other.y);
+  }
+  FractionalOffset operator *(double other) {
+    return new FractionalOffset(x * other, y * other);
+  }
+  bool operator ==(dynamic other) {
+    if (other is! FractionalOffset)
+      return false;
+    final FractionalOffset typedOther = other;
+    return x == typedOther.x &&
+           y == typedOther.y;
+  }
+  int get hashCode {
+    int value = 373;
+    value = 37 * value + x.hashCode;
+    value = 37 * value + y.hashCode;
+    return value;
+  }
+  static FractionalOffset lerp(FractionalOffset a, FractionalOffset b, double t) {
+    if (a == null && b == null)
+      return null;
+    if (a == null)
+      return new FractionalOffset(b.x * t, b.y * t);
+    if (b == null)
+      return new FractionalOffset(b.x * (1.0 - t), b.y * (1.0 - t));
+    return new FractionalOffset(ui.lerpDouble(a.x, b.x, t), ui.lerpDouble(a.y, b.y, t));
+  }
+  String toString() => '$runtimeType($x, $y)';
+}
+
 /// A background image for a box.
 class BackgroundImage {
   BackgroundImage({
@@ -735,11 +637,10 @@ class BackgroundImage {
 
   final ImageResource _imageResource;
 
-  final List<VoidCallback> _listeners =
-    new List<VoidCallback>();
+  final List<VoidCallback> _listeners = <VoidCallback>[];
 
   /// Call listener when the background images changes (e.g., arrives from the network).
-  void addChangeListener(VoidCallback listener) {
+  void _addChangeListener(VoidCallback listener) {
     // We add the listener to the _imageResource first so that the first change
     // listener doesn't get callback synchronously if the image resource is
     // already resolved.
@@ -749,7 +650,7 @@ class BackgroundImage {
   }
 
   /// No longer call listener when the background image changes.
-  void removeChangeListener(VoidCallback listener) {
+  void _removeChangeListener(VoidCallback listener) {
     _listeners.remove(listener);
     // We need to remove ourselves as listeners from the _imageResource so that
     // we're not kept alive by the image_cache.
@@ -795,18 +696,22 @@ class BackgroundImage {
   String toString() => 'BackgroundImage($fit, $repeat)';
 }
 
-// TODO(abarth): Rename to BoxShape?
-/// A 2D geometrical shape
-enum Shape {
-  /// An axis-aligned, 2D rectangle
+/// The shape to use when rendering a BoxDecoration.
+enum BoxShape {
+  /// An axis-aligned, 2D rectangle. May have rounded corners. The edges of the
+  /// rectangle will match the edges of the box into which the BoxDecoration is
+  /// painted.
   rectangle,
 
-  /// A 2D locus of points equidistant from a single point
+  /// A circle centered in the middle of the box into which the BoxDecoration is
+  /// painted. The diameter of the circle is the shortest dimension of the box,
+  /// either the width of the height, such that the circle touches the edges of
+  /// the box.
   circle
 }
 
 /// An immutable description of how to paint a box
-class BoxDecoration {
+class BoxDecoration extends Decoration {
   const BoxDecoration({
     this.backgroundColor, // null = don't draw background color
     this.backgroundImage, // null = don't draw background image
@@ -814,9 +719,15 @@ class BoxDecoration {
     this.borderRadius, // null = use more efficient background drawing; note that this must be null for circles
     this.boxShadow, // null = don't draw shadows
     this.gradient, // null = don't allocate gradient objects
-    this.shape: Shape.rectangle
+    this.shape: BoxShape.rectangle
   });
 
+  bool debugAssertValid() {
+    assert(shape != BoxShape.circle ||
+           borderRadius == null); // can't have a border radius if you're a circle
+    return super.debugAssertValid();
+  }
+
   /// The color to fill in the background of the box
   ///
   /// The color is filled into the shape of the box (e.g., either a rectangle,
@@ -841,9 +752,9 @@ class BoxDecoration {
   final Gradient gradient;
 
   /// The shape to fill the background color into and to cast as a shadow
-  final Shape shape;
+  final BoxShape shape;
 
-  /// Returns a new box decoration that is scalled by the given factor
+  /// Returns a new box decoration that is scaled by the given factor
   BoxDecoration scale(double factor) {
     // TODO(abarth): Scale ALL the things.
     return new BoxDecoration(
@@ -857,7 +768,33 @@ class BoxDecoration {
     );
   }
 
-  /// Linearly interpolate between two box decorations
+  double getEffectiveBorderRadius(Rect rect) {
+    double shortestSide = rect.shortestSide;
+    // In principle, we should use shortestSide / 2.0, but we don't want to
+    // run into floating point rounding errors. Instead, we just use
+    // shortestSide and let ui.Canvas do any remaining clamping.
+    return borderRadius > shortestSide ? shortestSide : borderRadius;
+  }
+
+  bool hitTest(Size size, Point position) {
+    assert(shape != null);
+    assert((Point.origin & size).contains(position));
+    switch (shape) {
+      case BoxShape.rectangle:
+        if (borderRadius != null) {
+          ui.RRect bounds = new ui.RRect.fromRectXY(Point.origin & size, borderRadius, borderRadius);
+          return bounds.contains(position);
+        }
+        return true;
+      case BoxShape.circle:
+        // Circles are inscribed into our smallest dimension.
+        Point center = size.center(Point.origin);
+        double distance = (position - center).distance;
+        return distance <= math.min(size.width, size.height) / 2.0;
+    }
+  }
+
+  /// Linearly interpolate between two box decorations.
   ///
   /// Interpolates each parameter of the box decoration separately.
   static BoxDecoration lerp(BoxDecoration a, BoxDecoration b, double t) {
@@ -879,6 +816,18 @@ class BoxDecoration {
     );
   }
 
+  BoxDecoration lerpFrom(Decoration a, double t) {
+    if (a is! BoxDecoration)
+      return BoxDecoration.lerp(null, this, t);
+    return BoxDecoration.lerp(a, this, t);
+  }
+
+  BoxDecoration lerpTo(Decoration b, double t) {
+    if (b is! BoxDecoration)
+      return BoxDecoration.lerp(this, null, t);
+    return BoxDecoration.lerp(this, b, t);
+  }
+
   bool operator ==(dynamic other) {
     if (identical(this, other))
       return true;
@@ -920,30 +869,32 @@ class BoxDecoration {
       result.add('${prefix}boxShadow: ${boxShadow.map((BoxShadow shadow) => shadow.toString())}');
     if (gradient != null)
       result.add('${prefix}gradient: $gradient');
-    if (shape != Shape.rectangle)
+    if (shape != BoxShape.rectangle)
       result.add('${prefix}shape: $shape');
     if (result.isEmpty)
       return '$prefix<no decorations specified>';
     return result.join('\n');
   }
+
+  bool get needsListeners => backgroundImage != null;
+
+  void addChangeListener(VoidCallback listener) {
+    backgroundImage?._addChangeListener(listener);
+  }
+  void removeChangeListener(VoidCallback listener) {
+    backgroundImage?._removeChangeListener(listener);
+  }
+
+  _BoxDecorationPainter createBoxPainter() => new _BoxDecorationPainter(this);
 }
 
 /// An object that paints a [BoxDecoration] into a canvas
-class BoxPainter {
-  BoxPainter(BoxDecoration decoration) : _decoration = decoration {
-    assert(decoration != null);
+class _BoxDecorationPainter extends BoxPainter {
+  _BoxDecorationPainter(this._decoration) {
+    assert(_decoration != null);
   }
 
-  BoxDecoration _decoration;
-  /// The box decoration to paint
-  BoxDecoration get decoration => _decoration;
-  void set decoration (BoxDecoration value) {
-    assert(value != null);
-    if (value == _decoration)
-      return;
-    _decoration = value;
-    _cachedBackgroundPaint = null;
-  }
+  final BoxDecoration _decoration;
 
   Paint _cachedBackgroundPaint;
   Paint get _backgroundPaint {
@@ -981,27 +932,19 @@ class BoxPainter {
     return hasUniformWidth;
   }
 
-  double _getEffectiveBorderRadius(Rect rect) {
-    double shortestSide = rect.shortestSide;
-    // In principle, we should use shortestSide / 2.0, but we don't want to
-    // run into floating point rounding errors. Instead, we just use
-    // shortestSide and let ui.Canvas do any remaining clamping.
-    return _decoration.borderRadius > shortestSide ? shortestSide : _decoration.borderRadius;
-  }
-
   void _paintBox(ui.Canvas canvas, Rect rect, Paint paint) {
     switch (_decoration.shape) {
-      case Shape.circle:
+      case BoxShape.circle:
         assert(_decoration.borderRadius == null);
         Point center = rect.center;
         double radius = rect.shortestSide / 2.0;
         canvas.drawCircle(center, radius, paint);
         break;
-      case Shape.rectangle:
+      case BoxShape.rectangle:
         if (_decoration.borderRadius == null) {
           canvas.drawRect(rect, paint);
         } else {
-          double radius = _getEffectiveBorderRadius(rect);
+          double radius = _decoration.getEffectiveBorderRadius(rect);
           canvas.drawRRect(new ui.RRect.fromRectXY(rect, radius, radius), paint);
         }
         break;
@@ -1053,14 +996,14 @@ class BoxPainter {
         _paintBorderWithRadius(canvas, rect);
         return;
       }
-      if (_decoration.shape == Shape.circle) {
+      if (_decoration.shape == BoxShape.circle) {
         _paintBorderWithCircle(canvas, rect);
         return;
       }
     }
 
     assert(_decoration.borderRadius == null); // TODO(abarth): Support non-uniform rounded borders.
-    assert(_decoration.shape == Shape.rectangle); // TODO(ianh): Support non-uniform borders on circles.
+    assert(_decoration.shape == BoxShape.rectangle); // TODO(ianh): Support non-uniform borders on circles.
 
     assert(_decoration.border.top != null);
     assert(_decoration.border.right != null);
@@ -1109,10 +1052,10 @@ class BoxPainter {
 
   void _paintBorderWithRadius(ui.Canvas canvas, Rect rect) {
     assert(_hasUniformBorder);
-    assert(_decoration.shape == Shape.rectangle);
+    assert(_decoration.shape == BoxShape.rectangle);
     Color color = _decoration.border.top.color;
     double width = _decoration.border.top.width;
-    double radius = _getEffectiveBorderRadius(rect);
+    double radius = _decoration.getEffectiveBorderRadius(rect);
 
     ui.RRect outer = new ui.RRect.fromRectXY(rect, radius, radius);
     ui.RRect inner = new ui.RRect.fromRectXY(rect.deflate(width), radius - width, radius - width);
@@ -1121,12 +1064,11 @@ class BoxPainter {
 
   void _paintBorderWithCircle(ui.Canvas canvas, Rect rect) {
     assert(_hasUniformBorder);
-    assert(_decoration.shape == Shape.circle);
+    assert(_decoration.shape == BoxShape.circle);
     assert(_decoration.borderRadius == null);
     double width = _decoration.border.top.width;
-    if (width <= 0.0) {
+    if (width <= 0.0)
       return;
-    }
     Paint paint = new Paint()
       ..color = _decoration.border.top.color
       ..strokeWidth = width
@@ -1144,45 +1086,3 @@ class BoxPainter {
     _paintBorder(canvas, rect);
   }
 }
-
-/// An offset that's expressed as a fraction of a Size.
-///
-/// FractionalOffset(1.0, 0.0) represents the top right of the Size,
-/// FractionalOffset(0.0, 1.0) represents the bottom left of the Size,
-class FractionalOffset {
-  const FractionalOffset(this.x, this.y);
-  final double x;
-  final double y;
-  FractionalOffset operator -(FractionalOffset other) {
-    return new FractionalOffset(x - other.x, y - other.y);
-  }
-  FractionalOffset operator +(FractionalOffset other) {
-    return new FractionalOffset(x + other.x, y + other.y);
-  }
-  FractionalOffset operator *(double other) {
-    return new FractionalOffset(x * other, y * other);
-  }
-  bool operator ==(dynamic other) {
-    if (other is! FractionalOffset)
-      return false;
-    final FractionalOffset typedOther = other;
-    return x == typedOther.x &&
-           y == typedOther.y;
-  }
-  int get hashCode {
-    int value = 373;
-    value = 37 * value + x.hashCode;
-    value = 37 * value + y.hashCode;
-    return value;
-  }
-  static FractionalOffset lerp(FractionalOffset a, FractionalOffset b, double t) {
-    if (a == null && b == null)
-      return null;
-    if (a == null)
-      return new FractionalOffset(b.x * t, b.y * t);
-    if (b == null)
-      return new FractionalOffset(b.x * (1.0 - t), b.y * (1.0 - t));
-    return new FractionalOffset(ui.lerpDouble(a.x, b.x, t), ui.lerpDouble(a.y, b.y, t));
-  }
-  String toString() => '$runtimeType($x, $y)';
-}

packages/flutter/lib/src/painting/decoration.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui' as ui;
+
+import 'edge_dims.dart';
+
+export 'edge_dims.dart' show EdgeDims;
+
+// This group of classes is intended for painting in cartesian coordinates.
+
+abstract class Decoration {
+  const Decoration();
+  bool debugAssertValid() => true;
+  EdgeDims get padding => null;
+  Decoration lerpFrom(Decoration a, double t) => this;
+  Decoration lerpTo(Decoration b, double t) => b;
+  bool hitTest(ui.Size size, ui.Point position) => true;
+  bool get needsListeners => false;
+  void addChangeListener(ui.VoidCallback listener) { assert(false); }
+  void removeChangeListener(ui.VoidCallback listener) { assert(false); }
+  BoxPainter createBoxPainter();
+  String toString([String prefix = '']) => '$prefix$runtimeType';
+}
+
+abstract class BoxPainter {
+  void paint(ui.Canvas canvas, ui.Rect rect);
+}

packages/flutter/lib/src/painting/edge_dims.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui' as ui;
+
+/// An immutable set of offsets in each of the four cardinal directions.
+///
+/// Typically used for an offset from each of the four sides of a box. For
+/// example, the padding inside a box can be represented using this class.
+class EdgeDims {
+  /// Constructs an EdgeDims from offsets from the top, right, bottom and left.
+  const EdgeDims.TRBL(this.top, this.right, this.bottom, this.left);
+
+  /// Constructs an EdgeDims where all the offsets are value.
+  const EdgeDims.all(double value)
+      : top = value, right = value, bottom = value, left = value;
+
+  /// Constructs an EdgeDims with only the given values non-zero.
+  const EdgeDims.only({ this.top: 0.0,
+                        this.right: 0.0,
+                        this.bottom: 0.0,
+                        this.left: 0.0 });
+
+  /// Constructs an EdgeDims with symmetrical vertical and horizontal offsets.
+  const EdgeDims.symmetric({ double vertical: 0.0,
+                             double horizontal: 0.0 })
+    : top = vertical, left = horizontal, bottom = vertical, right = horizontal;
+
+  /// The offset from the top.
+  final double top;
+
+  /// The offset from the right.
+  final double right;
+
+  /// The offset from the bottom.
+  final double bottom;
+
+  /// The offset from the left.
+  final double left;
+
+  /// Whether every dimension is non-negative.
+  bool get isNonNegative => top >= 0.0 && right >= 0.0 && bottom >= 0.0 && left >= 0.0;
+
+  /// The size that this edge dims would occupy with an empty interior.
+  ui.Size get collapsedSize => new ui.Size(left + right, top + bottom);
+
+  ui.Rect inflateRect(ui.Rect rect) {
+    return new ui.Rect.fromLTRB(rect.left - left, rect.top - top, rect.right + right, rect.bottom + bottom);
+  }
+
+  EdgeDims operator -(EdgeDims other) {
+    return new EdgeDims.TRBL(
+      top - other.top,
+      right - other.right,
+      bottom - other.bottom,
+      left - other.left
+    );
+  }
+
+  EdgeDims operator +(EdgeDims other) {
+    return new EdgeDims.TRBL(
+      top + other.top,
+      right + other.right,
+      bottom + other.bottom,
+      left + other.left
+    );
+  }
+
+  EdgeDims operator *(double other) {
+    return new EdgeDims.TRBL(
+      top * other,
+      right * other,
+      bottom * other,
+      left * other
+    );
+  }
+
+  EdgeDims operator /(double other) {
+    return new EdgeDims.TRBL(
+      top / other,
+      right / other,
+      bottom / other,
+      left / other
+    );
+  }
+
+  EdgeDims operator ~/(double other) {
+    return new EdgeDims.TRBL(
+      (top ~/ other).toDouble(),
+      (right ~/ other).toDouble(),
+      (bottom ~/ other).toDouble(),
+      (left ~/ other).toDouble()
+    );
+  }
+
+  EdgeDims operator %(double other) {
+    return new EdgeDims.TRBL(
+      top % other,
+      right % other,
+      bottom % other,
+      left % other
+    );
+  }
+
+  /// Linearly interpolate between two EdgeDims.
+  ///
+  /// If either is null, this function interpolates from [EdgeDims.zero].
+  static EdgeDims lerp(EdgeDims a, EdgeDims b, double t) {
+    if (a == null && b == null)
+      return null;
+    if (a == null)
+      return b * t;
+    if (b == null)
+      return a * (1.0 - t);
+    return new EdgeDims.TRBL(
+      ui.lerpDouble(a.top, b.top, t),
+      ui.lerpDouble(a.right, b.right, t),
+      ui.lerpDouble(a.bottom, b.bottom, t),
+      ui.lerpDouble(a.left, b.left, t)
+    );
+  }
+
+  /// An EdgeDims with zero offsets in each direction.
+  static const EdgeDims zero = const EdgeDims.TRBL(0.0, 0.0, 0.0, 0.0);
+
+  bool operator ==(dynamic other) {
+    if (identical(this, other))
+      return true;
+    if (other is! EdgeDims)
+      return false;
+    final EdgeDims typedOther = other;
+    return top == typedOther.top &&
+           right == typedOther.right &&
+           bottom == typedOther.bottom &&
+           left == typedOther.left;
+  }
+
+  int get hashCode {
+    int value = 373;
+    value = 37 * value + top.hashCode;
+    value = 37 * value + left.hashCode;
+    value = 37 * value + bottom.hashCode;
+    value = 37 * value + right.hashCode;
+    return value;
+  }
+
+  String toString() => "EdgeDims($top, $right, $bottom, $left)";
+}

packages/flutter/lib/src/rendering/box.dart

@@ -13,7 +13,7 @@ import 'package:vector_math/vector_math_64.dart';
 import 'debug.dart';
 import 'object.dart';
 
-export 'package:flutter/painting.dart' show FractionalOffset, TextBaseline;
+export 'package:flutter/painting.dart' show EdgeDims, FractionalOffset, TextBaseline;
 
 // This class should only be used in debug builds
 class _DebugSize extends Size {

packages/flutter/lib/src/rendering/proxy_box.dart

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:math' as math;
 import 'dart:ui' as ui;
 
 import 'package:flutter/painting.dart';
@@ -13,13 +12,13 @@ import 'box.dart';
 import 'debug.dart';
 import 'object.dart';
 
-export 'package:flutter/src/painting/box_painter.dart';
 export 'package:flutter/gestures.dart' show
   PointerEvent,
   PointerDownEvent,
   PointerMoveEvent,
   PointerUpEvent,
   PointerCancelEvent;
+export 'package:flutter/painting.dart' show Decoration, BoxDecoration;
 
 /// A base class for render objects that resemble their children.
 ///
@@ -704,9 +703,11 @@ class RenderClipOval extends _RenderCustomClip<Rect> {
   bool hitTest(HitTestResult result, { Point position }) {
     Rect clipBounds = _clip;
     Point center = clipBounds.center;
+    // convert the position to an offset from the center of the unit circle
     Offset offset = new Offset((position.x - center.x) / clipBounds.width,
                                (position.y - center.y) / clipBounds.height);
-    if (offset.distance > 0.5)
+    // check if the point is outside the unit circle
+    if (offset.distanceSquared > 0.25) // x^2 + y^2 > r^2
       return false;
     return super.hitTest(result, position: position);
   }
@@ -720,7 +721,7 @@ class RenderClipOval extends _RenderCustomClip<Rect> {
 }
 
 /// Where to paint a box decoration.
-enum BoxDecorationPosition {
+enum DecorationPosition {
   /// Paint the box decoration behind the children.
   background,
 
@@ -728,97 +729,90 @@ enum BoxDecorationPosition {
   foreground,
 }
 
-/// Paints a [BoxDecoration] either before or after its child paints.
+/// Paints a [Decoration] either before or after its child paints.
 class RenderDecoratedBox extends RenderProxyBox {
 
   RenderDecoratedBox({
-    BoxDecoration decoration,
-    RenderBox child,
-    BoxDecorationPosition position: BoxDecorationPosition.background
-  }) : _painter = new BoxPainter(decoration),
+    Decoration decoration,
+    DecorationPosition position: DecorationPosition.background,
+    RenderBox child
+  }) : _decoration = decoration,
        _position = position,
        super(child) {
     assert(decoration != null);
     assert(position != null);
   }
 
-  /// Where to paint the box decoration.
-  BoxDecorationPosition get position => _position;
-  BoxDecorationPosition _position;
-  void set position (BoxDecorationPosition newPosition) {
-    assert(newPosition != null);
-    if (newPosition == _position)
-      return;
-    markNeedsPaint();
-  }
+  BoxPainter _painter;
 
   /// What decoration to paint.
-  BoxDecoration get decoration => _painter.decoration;
-  void set decoration (BoxDecoration newDecoration) {
+  Decoration get decoration => _decoration;
+  Decoration _decoration;
+  void set decoration (Decoration newDecoration) {
     assert(newDecoration != null);
-    if (newDecoration == _painter.decoration)
+    if (newDecoration == _decoration)
       return;
-    _removeBackgroundImageListenerIfNeeded();
-    _painter.decoration = newDecoration;
-    _addBackgroundImageListenerIfNeeded();
+    _removeListenerIfNeeded();
+    _painter = null;
+    _decoration = newDecoration;
+    _addListenerIfNeeded();
     markNeedsPaint();
   }
 
-  final BoxPainter _painter;
+  /// Where to paint the box decoration.
+  DecorationPosition get position => _position;
+  DecorationPosition _position;
+  void set position (DecorationPosition newPosition) {
+    assert(newPosition != null);
+    if (newPosition == _position)
+      return;
+    _position = newPosition;
+    markNeedsPaint();
+  }
 
-  bool get _needsBackgroundImageListener {
-    return attached &&
-        _painter.decoration != null &&
-        _painter.decoration.backgroundImage != null;
+  bool get _needsListeners {
+    return attached && _decoration.needsListeners;
   }
 
-  void _addBackgroundImageListenerIfNeeded() {
-    if (_needsBackgroundImageListener)
-      _painter.decoration.backgroundImage.addChangeListener(markNeedsPaint);
+  void _addListenerIfNeeded() {
+    if (_needsListeners)
+      _decoration.addChangeListener(markNeedsPaint);
   }
 
-  void _removeBackgroundImageListenerIfNeeded() {
-    if (_needsBackgroundImageListener)
-      _painter.decoration.backgroundImage.removeChangeListener(markNeedsPaint);
+  void _removeListenerIfNeeded() {
+    if (_needsListeners)
+      _decoration.removeChangeListener(markNeedsPaint);
   }
 
   void attach() {
     super.attach();
-    _addBackgroundImageListenerIfNeeded();
+    _addListenerIfNeeded();
   }
 
   void detach() {
-    _removeBackgroundImageListenerIfNeeded();
+    _removeListenerIfNeeded();
     super.detach();
   }
 
   bool hitTestSelf(Point position) {
-    switch (_painter.decoration.shape) {
-      case Shape.rectangle:
-        // TODO(abarth): We should check the border radius.
-        return true;
-      case Shape.circle:
-        // Circles are inscribed into our smallest dimension.
-        Point center = size.center(Point.origin);
-        double distance = (position - center).distance;
-        return distance <= math.min(size.width, size.height) / 2.0;
-    }
+    return _decoration.hitTest(size, position);
   }
 
   void paint(PaintingContext context, Offset offset) {
     assert(size.width != null);
     assert(size.height != null);
-    if (position == BoxDecorationPosition.background)
+    _painter ??= _decoration.createBoxPainter();
+    if (position == DecorationPosition.background)
       _painter.paint(context.canvas, offset & size);
     super.paint(context, offset);
-    if (position == BoxDecorationPosition.foreground)
+    if (position == DecorationPosition.foreground)
       _painter.paint(context.canvas, offset & size);
   }
 
   void debugDescribeSettings(List<String> settings) {
     super.debugDescribeSettings(settings);
     settings.add('decoration:');
-    settings.addAll(_painter.decoration.toString("  ").split('\n'));
+    settings.addAll(_decoration.toString("  ").split('\n'));
   }
 }
 

packages/flutter/lib/src/widgets/animated_container.dart

@@ -16,11 +16,17 @@ class AnimatedBoxConstraintsValue extends AnimatedValue<BoxConstraints> {
   BoxConstraints lerp(double t) => BoxConstraints.lerp(begin, end, t);
 }
 
-class AnimatedBoxDecorationValue extends AnimatedValue<BoxDecoration> {
-  AnimatedBoxDecorationValue(BoxDecoration begin, { BoxDecoration end, Curve curve, Curve reverseCurve })
+class AnimatedDecorationValue extends AnimatedValue<Decoration> {
+  AnimatedDecorationValue(Decoration begin, { Decoration end, Curve curve, Curve reverseCurve })
     : super(begin, end: end, curve: curve, reverseCurve: reverseCurve);
 
-  BoxDecoration lerp(double t) => BoxDecoration.lerp(begin, end, t);
+  Decoration lerp(double t) {
+    if (begin == null && end == null)
+      return null;
+    if (end == null)
+      return begin.lerpTo(end, t);
+    return end.lerpFrom(begin, t);
+  }
 }
 
 class AnimatedEdgeDimsValue extends AnimatedValue<EdgeDims> {
@@ -62,14 +68,14 @@ class AnimatedContainer extends StatefulComponent {
     assert(margin == null || margin.isNonNegative);
     assert(padding == null || padding.isNonNegative);
     assert(curve != null);
-    assert(duration != null);
+    assert(duration != null || decoration.debugAssertValid());
   }
 
   final Widget child;
 
   final BoxConstraints constraints;
-  final BoxDecoration decoration;
-  final BoxDecoration foregroundDecoration;
+  final Decoration decoration;
+  final Decoration foregroundDecoration;
   final EdgeDims margin;
   final EdgeDims padding;
   final Matrix4 transform;
@@ -84,8 +90,8 @@ class AnimatedContainer extends StatefulComponent {
 
 class _AnimatedContainerState extends State<AnimatedContainer> {
   AnimatedBoxConstraintsValue _constraints;
-  AnimatedBoxDecorationValue _decoration;
-  AnimatedBoxDecorationValue _foregroundDecoration;
+  AnimatedDecorationValue _decoration;
+  AnimatedDecorationValue _foregroundDecoration;
   AnimatedEdgeDimsValue _margin;
   AnimatedEdgeDimsValue _padding;
   AnimatedMatrix4Value _transform;
@@ -167,7 +173,7 @@ class _AnimatedContainerState extends State<AnimatedContainer> {
     }
 
     if (config.decoration != null) {
-      _decoration ??= new AnimatedBoxDecorationValue(config.decoration);
+      _decoration ??= new AnimatedDecorationValue(config.decoration);
       if (_configVariable(_decoration, config.decoration))
         needsAnimation = true;
     } else {
@@ -175,7 +181,7 @@ class _AnimatedContainerState extends State<AnimatedContainer> {
     }
 
     if (config.foregroundDecoration != null) {
-      _foregroundDecoration ??= new AnimatedBoxDecorationValue(config.foregroundDecoration);
+      _foregroundDecoration ??= new AnimatedDecorationValue(config.foregroundDecoration);
       if (_configVariable(_foregroundDecoration, config.foregroundDecoration))
         needsAnimation = true;
     } else {

packages/flutter/lib/src/widgets/basic.dart

@@ -16,13 +16,15 @@ export 'package:flutter/rendering.dart' show
     BorderSide,
     BoxConstraints,
     BoxDecoration,
-    BoxDecorationPosition,
     BoxShadow,
+    BoxShape,
     Canvas,
     Color,
     ColorFilter,
     CustomClipper,
     CustomPainter,
+    Decoration,
+    DecorationPosition,
     EdgeDims,
     FlexAlignItems,
     FlexDirection,
@@ -51,7 +53,6 @@ export 'package:flutter/rendering.dart' show
     RadialGradient,
     Rect,
     ScrollDirection,
-    Shape,
     Size,
     StyledTextSpan,
     TextAlign,
@@ -135,7 +136,7 @@ class DecoratedBox extends OneChildRenderObjectWidget {
   DecoratedBox({
     Key key,
     this.decoration,
-    this.position: BoxDecorationPosition.background,
+    this.position: DecorationPosition.background,
     Widget child
   }) : super(key: key, child: child) {
     assert(decoration != null);
@@ -143,10 +144,10 @@ class DecoratedBox extends OneChildRenderObjectWidget {
   }
 
   /// What decoration to paint.
-  final BoxDecoration decoration;
+  final Decoration decoration;
 
   /// Where to paint the box decoration.
-  final BoxDecorationPosition position;
+  final DecorationPosition position;
 
   RenderDecoratedBox createRenderObject() => new RenderDecoratedBox(decoration: decoration, position: position);
 
@@ -782,26 +783,26 @@ class Container extends StatelessComponent {
   }) : super(key: key) {
     assert(margin == null || margin.isNonNegative);
     assert(padding == null || padding.isNonNegative);
-    assert(decoration == null || decoration.shape != Shape.circle || decoration.borderRadius == null); // can't have a border radius if you're a circle
+    assert(decoration == null || decoration.debugAssertValid());
   }
 
   final Widget child;
   final BoxConstraints constraints;
-  final BoxDecoration decoration;
-  final BoxDecoration foregroundDecoration;
+  final Decoration decoration;
+  final Decoration foregroundDecoration;
   final EdgeDims margin;
   final EdgeDims padding;
   final Matrix4 transform;
   final double width;
   final double height;
 
-  EdgeDims get _paddingIncludingBorder {
-    if (decoration == null || decoration.border == null)
+  EdgeDims get _paddingIncludingDecoration {
+    if (decoration == null || decoration.padding == null)
       return padding;
-    EdgeDims borderPadding = decoration.border.dimensions;
+    EdgeDims decorationPadding = decoration.padding;
     if (padding == null)
-      return borderPadding;
-    return padding + borderPadding;
+      return decorationPadding;
+    return padding + decorationPadding;
   }
 
   Widget build(BuildContext context) {
@@ -810,7 +811,7 @@ class Container extends StatelessComponent {
     if (child == null && (width == null || height == null))
       current = new ConstrainedBox(constraints: const BoxConstraints.expand());
 
-    EdgeDims effectivePadding = _paddingIncludingBorder;
+    EdgeDims effectivePadding = _paddingIncludingDecoration;
     if (effectivePadding != null)
       current = new Padding(padding: effectivePadding, child: current);
 
@@ -820,7 +821,7 @@ class Container extends StatelessComponent {
     if (foregroundDecoration != null) {
       current = new DecoratedBox(
         decoration: foregroundDecoration,
-        position: BoxDecorationPosition.foreground,
+        position: DecorationPosition.foreground,
         child: current
       );
     }

packages/unit/test/widget/animated_container_test.dart

@@ -21,6 +21,8 @@ void main() {
         backgroundColor: new Color(0xFF0000FF)
       );
 
+      BoxDecoration actualDecoration;
+
       tester.pumpWidget(
         new AnimatedContainer(
           key: key,
@@ -30,7 +32,8 @@ void main() {
       );
 
       RenderDecoratedBox box = key.currentState.context.findRenderObject();
-      expect(box.decoration.backgroundColor, equals(decorationA.backgroundColor));
+      actualDecoration = box.decoration;
+      expect(actualDecoration.backgroundColor, equals(decorationA.backgroundColor));
 
       tester.pumpWidget(
         new AnimatedContainer(
@@ -41,11 +44,13 @@ void main() {
       );
 
       expect(key.currentState.context.findRenderObject(), equals(box));
-      expect(box.decoration.backgroundColor, equals(decorationA.backgroundColor));
+      actualDecoration = box.decoration;
+      expect(actualDecoration.backgroundColor, equals(decorationA.backgroundColor));
 
       tester.pump(const Duration(seconds: 1));
 
-      expect(box.decoration.backgroundColor, equals(decorationB.backgroundColor));
+      actualDecoration = box.decoration;
+      expect(actualDecoration.backgroundColor, equals(decorationB.backgroundColor));
 
     });
   });

packages/unit/test/widget/box_decoration_test.dart

@@ -14,7 +14,7 @@ void main() {
         new Container(
           padding: new EdgeDims.all(50.0),
           decoration: new BoxDecoration(
-            shape: Shape.circle,
+            shape: BoxShape.circle,
             border: new Border.all(width: 10.0, color: const Color(0x80FF00FF)),
             backgroundColor: Colors.teal[600]
           )

packages/unit/test/widget/render_object_widget_test.dart

@@ -27,7 +27,7 @@ void main() {
       expect(element.renderObject is RenderDecoratedBox, isTrue);
       RenderDecoratedBox renderObject = element.renderObject;
       expect(renderObject.decoration, equals(kBoxDecorationA));
-      expect(renderObject.position, equals(BoxDecorationPosition.background));
+      expect(renderObject.position, equals(DecorationPosition.background));
 
       tester.pumpWidget(new DecoratedBox(decoration: kBoxDecorationB));
       element = tester.findElement((Element element) => element is OneChildRenderObjectElement);
@@ -35,7 +35,7 @@ void main() {
       expect(element.renderObject is RenderDecoratedBox, isTrue);
       renderObject = element.renderObject;
       expect(renderObject.decoration, equals(kBoxDecorationB));
-      expect(renderObject.position, equals(BoxDecorationPosition.background));
+      expect(renderObject.position, equals(DecorationPosition.background));
     });
   });
 
@@ -49,12 +49,12 @@ void main() {
         expect(element.renderObject is RenderDecoratedBox, isTrue);
         RenderDecoratedBox renderObject = element.renderObject;
         expect(renderObject.decoration, equals(kBoxDecorationA));
-        expect(renderObject.position, equals(BoxDecorationPosition.background));
+        expect(renderObject.position, equals(DecorationPosition.background));
         expect(renderObject.child, isNotNull);
         expect(renderObject.child is RenderDecoratedBox, isTrue);
         RenderDecoratedBox child = renderObject.child;
         expect(child.decoration, equals(kBoxDecorationB));
-        expect(child.position, equals(BoxDecorationPosition.background));
+        expect(child.position, equals(DecorationPosition.background));
         expect(child.child, isNull);
       }
 
@@ -65,7 +65,7 @@ void main() {
         expect(element.renderObject is RenderDecoratedBox, isTrue);
         RenderDecoratedBox renderObject = element.renderObject;
         expect(renderObject.decoration, equals(kBoxDecorationA));
-        expect(renderObject.position, equals(BoxDecorationPosition.background));
+        expect(renderObject.position, equals(DecorationPosition.background));
         expect(renderObject.child, isNull);
       }