Merge pull request #1257 from Hixie/shadows

More elaborate RenderBox example

examples/rendering/shadowed_box.dart

@@ -2,29 +2,95 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:ui';
-
 import 'package:flutter/rendering.dart';
-import 'package:flutter/material.dart';
+
+const List<BoxShadow> shadow = const <BoxShadow>[
+  const BoxShadow(offset: const Offset(0.0, 3.0), blurRadius: 1.0, spreadRadius: -2.0, color: const Color(0x33000000)),
+  const BoxShadow(offset: const Offset(0.0, 2.0), blurRadius: 2.0, spreadRadius:  0.0, color: const Color(0x24000000)),
+  const BoxShadow(offset: const Offset(0.0, 1.0), blurRadius: 5.0, spreadRadius:  0.0, color: const Color(0x1F000000)),
+];
 
 void main() {
-  RenderBox coloredBox = new RenderDecoratedBox(
-    decoration: new BoxDecoration(
-      gradient: new RadialGradient(
-        center: Point.origin, radius: 500.0,
-        colors: <Color>[Colors.yellow[500], Colors.blue[500]]
-      ),
-      boxShadow: elevationToShadow[8]
+  RenderDecoratedBox box1, box2, box3;
+  new RenderingFlutterBinding(root: new RenderPadding(
+    padding: const EdgeDims.all(40.0),
+    child: new RenderViewport(
+      child: new RenderDecoratedBox(
+        decoration: const BoxDecoration(
+          backgroundColor: const Color(0xFFFFFFFF)
+        ),
+        child: new RenderBlock(
+          children: <RenderBox>[
+            new RenderPadding(
+              padding: const EdgeDims.all(40.0),
+              child: new RenderPointerListener(
+                behavior: HitTestBehavior.opaque,
+                onPointerDown: (PointerDownEvent event) {
+                  box1.decoration = const BoxDecoration(
+                    gradient: const RadialGradient(
+                      center: Point.origin, radius: 500.0,
+                      colors: const <Color>[const Color(0x20F0D0B0), const Color(0xD0C0FFFF)]
+                    ),
+                    borderRadius: 20.0
+                  );
+                  RenderPadding innerBox1 = box1.child;
+                  innerBox1.padding *= 1.5;
+                  innerBox1.child = new RenderParagraph(
+                    const StyledTextSpan(
+                      const TextStyle(
+                        color: const Color(0xFF000000),
+                        fontSize: 20.0,
+                        fontWeight: FontWeight.w900,
+                        textAlign: TextAlign.center
+                      ),
+                      const <TextSpan>[ const PlainTextSpan('Hello World!') ]
+                    )
+                  );
+                  RenderBlock block = box3.parent.parent;
+                  block.remove(box3.parent);
+                  RenderPadding innerBox2 = box2.child;
+                  innerBox2.child = box3.parent;
+                  RenderPointerListener listener = box1.parent;
+                  listener.onPointerDown = null;
+                },
+                child: box1 = new RenderDecoratedBox(
+                  decoration: const BoxDecoration(
+                    backgroundColor: const Color(0xFFFFFF00),
+                    boxShadow: shadow
+                  ),
+                  child: new RenderPadding(
+                    padding: const EdgeDims.all(40.0)
+                  )
+                )
+              )
+            ),
+            new RenderPadding(
+              padding: const EdgeDims.all(40.0),
+              child: box2 = new RenderDecoratedBox(
+                decoration: const BoxDecoration(
+                  backgroundColor: const Color(0xFF00FFFF),
+                  boxShadow: shadow
+                ),
+                child: new RenderPadding(
+                  padding: const EdgeDims.all(40.0)
+                )
+              )
+            ),
+            new RenderPadding(
+              padding: const EdgeDims.all(40.0),
+              child: box3 = new RenderDecoratedBox(
+                decoration: const BoxDecoration(
+                  backgroundColor: const Color(0xFF33FF33),
+                  boxShadow: shadow
+                ),
+                child: new RenderPadding(
+                  padding: const EdgeDims.all(40.0)
+                )
+              )
+            ),
+          ]
+        )
+      )
     )
-  );
-  RenderBox paddedBox = new RenderPadding(
-    padding: const EdgeDims.all(50.0),
-    child: coloredBox
-  );
-  new RenderingFlutterBinding(root: new RenderDecoratedBox(
-    decoration: const BoxDecoration(
-      backgroundColor: const Color(0xFFFFFFFF)
-    ),
-    child: paddedBox
   ));
 }

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

@@ -10,6 +10,7 @@ import 'text_style.dart';
 /// An immutable span of text.
 abstract class TextSpan {
   // This class must be immutable, because we won't notice when it changes.
+  const TextSpan();
   String toString([String prefix = '']);
   void build(ui.ParagraphBuilder builder);
   ui.ParagraphStyle get paragraphStyle => null;
@@ -17,14 +18,13 @@ abstract class TextSpan {
 
 /// An immutable span of unstyled text.
 class PlainTextSpan extends TextSpan {
-  PlainTextSpan(this.text) {
-    assert(text != null);
-  }
+  const PlainTextSpan(this.text);
 
   /// The text contained in the span.
   final String text;
 
   void build(ui.ParagraphBuilder builder) {
+    assert(text != null);
     builder.addText(text);
   }
 
@@ -42,10 +42,7 @@ class PlainTextSpan extends TextSpan {
 
 /// An immutable text span that applies a style to a list of children.
 class StyledTextSpan extends TextSpan {
-  StyledTextSpan(this.style, this.children) {
-    assert(style != null);
-    assert(children != null);
-  }
+  const StyledTextSpan(this.style, this.children);
 
   /// The style to apply to the children.
   final TextStyle style;
@@ -54,9 +51,13 @@ class StyledTextSpan extends TextSpan {
   final List<TextSpan> children;
 
   void build(ui.ParagraphBuilder builder) {
+    assert(style != null);
+    assert(children != null);
     builder.pushStyle(style.textStyle);
-    for (TextSpan child in children)
+    for (TextSpan child in children) {
+      assert(child != null);
       child.build(builder);
+    }
     builder.pop();
   }
 

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

@@ -93,7 +93,7 @@ void debugDumpLayerTree() {
 
 /// A concrete binding for applications that use the Rendering framework
 /// directly. This is the glue that binds the framework to the Flutter engine.
-class RenderingFlutterBinding extends BindingBase with Scheduler, Renderer, Gesturer {
+class RenderingFlutterBinding extends BindingBase with Scheduler, Gesturer, Renderer {
   RenderingFlutterBinding({ RenderBox root }) {
     assert(renderView != null);
     renderView.child = root;

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

@@ -1304,6 +1304,7 @@ class RenderPointerListener extends RenderProxyBox {
 /// not, we can re-record its display list without re-recording the display list
 /// for the surround tree.
 class RenderRepaintBoundary extends RenderProxyBox {
+  RenderRepaintBoundary({ RenderBox child }) : super(child);
   bool get isRepaintBoundary => true;
 }