From 8f0efd54ffaabf51e36705943671c87f90a1feb9 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Wed, 19 Aug 2015 09:36:40 -0700
Subject: [PATCH] Add the ability to draw a foreground box decoration

This feature lets you create effects similar to the "outline" property in CSS.
---
 packages/flutter/lib/rendering/proxy_box.dart | 14 ++++++++++++--
 packages/flutter/lib/widgets/basic.dart       | 18 +++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/flutter/lib/rendering/proxy_box.dart b/packages/flutter/lib/rendering/proxy_box.dart
index a3813d9a24..647663ff7d 100644
--- a/packages/flutter/lib/rendering/proxy_box.dart
+++ b/packages/flutter/lib/rendering/proxy_box.dart
@@ -434,13 +434,20 @@ class RenderClipOval extends RenderProxyBox {
   }
 }
 
+enum BoxDecorationPosition {
+  background,
+  foreground,
+}
+
 class RenderDecoratedBox extends RenderProxyBox {
 
   RenderDecoratedBox({
     BoxDecoration decoration,
-    RenderBox child
+    RenderBox child,
+    this.position: BoxDecorationPosition.background
   }) : _painter = new BoxPainter(decoration), super(child);
 
+  BoxDecorationPosition position;
   final BoxPainter _painter;
 
   BoxDecoration get decoration => _painter.decoration;
@@ -483,8 +490,11 @@ class RenderDecoratedBox extends RenderProxyBox {
   void paint(PaintingContext context, Offset offset) {
     assert(size.width != null);
     assert(size.height != null);
-    _painter.paint(context.canvas, offset & size);
+    if (position == BoxDecorationPosition.background)
+      _painter.paint(context.canvas, offset & size);
     super.paint(context, offset);
+    if (position == BoxDecorationPosition.foreground)
+      _painter.paint(context.canvas, offset & size);
   }
 
   String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings(prefix)}${prefix}decoration:\n${_painter.decoration.toString(prefix + "  ")}\n';
diff --git a/packages/flutter/lib/widgets/basic.dart b/packages/flutter/lib/widgets/basic.dart
index bd55b00a77..4c48e5410a 100644
--- a/packages/flutter/lib/widgets/basic.dart
+++ b/packages/flutter/lib/widgets/basic.dart
@@ -30,7 +30,7 @@ export 'package:sky/rendering/block.dart' show BlockDirection;
 export 'package:sky/rendering/box.dart' show BoxConstraints;
 export 'package:sky/rendering/flex.dart' show FlexDirection, FlexJustifyContent, FlexAlignItems;
 export 'package:sky/rendering/object.dart' show Point, Offset, Size, Rect, Color, Paint, Path;
-export 'package:sky/rendering/proxy_box.dart' show BackgroundImage, BoxDecoration, BoxShadow, Border, BorderSide, EdgeDims, Shape;
+export 'package:sky/rendering/proxy_box.dart' show BackgroundImage, BoxDecoration, BoxDecorationPosition, BoxShadow, Border, BorderSide, EdgeDims, Shape;
 export 'package:sky/rendering/toggleable.dart' show ValueChanged;
 export 'package:sky/rendering/viewport.dart' show ScrollDirection;
 export 'package:sky/widgets/framework.dart' show Key, GlobalKey, Widget, Component, StatefulComponent, App, runApp, Listener, ParentDataNode;
@@ -70,17 +70,19 @@ class ColorFilter extends OneChildRenderObjectWrapper {
 }
 
 class DecoratedBox extends OneChildRenderObjectWrapper {
-  DecoratedBox({ Key key, this.decoration, Widget child })
+  DecoratedBox({ Key key, this.decoration, this.position, Widget child })
     : super(key: key, child: child);
 
   final BoxDecoration decoration;
+  final BoxDecorationPosition position;
 
-  RenderDecoratedBox createNode() => new RenderDecoratedBox(decoration: decoration);
+  RenderDecoratedBox createNode() => new RenderDecoratedBox(decoration: decoration, position: position);
   RenderDecoratedBox get renderObject => super.renderObject;
 
   void syncRenderObject(DecoratedBox old) {
     super.syncRenderObject(old);
     renderObject.decoration = decoration;
+    renderObject.position = position;
   }
 }
 
@@ -327,6 +329,7 @@ class Container extends Component {
     this.child,
     this.constraints,
     this.decoration,
+    this.foregroundDecoration,
     this.width,
     this.height,
     this.margin,
@@ -337,6 +340,7 @@ class Container extends Component {
   final Widget child;
   final BoxConstraints constraints;
   final BoxDecoration decoration;
+  final BoxDecoration foregroundDecoration;
   final EdgeDims margin;
   final EdgeDims padding;
   final Matrix4 transform;
@@ -365,6 +369,14 @@ class Container extends Component {
     if (decoration != null)
       current = new DecoratedBox(decoration: decoration, child: current);
 
+    if (foregroundDecoration != null) {
+      current = new DecoratedBox(
+        decoration: foregroundDecoration,
+        position: BoxDecorationPosition.foreground,
+        child: current
+      );
+    }
+
     if (width != null || height != null) {
       current = new SizedBox(
         width: width,