New Placeholder widget. (#9565)

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

@@ -38,7 +38,7 @@ class FlutterLogo extends StatelessWidget {
   /// 24.0.
   final double size;
 
-  /// The color swatch to use to paint the logo, Colors.blue by default.
+  /// The color swatch to use to paint the logo, [Colors.blue] by default.
   ///
   /// If for some reason the default colors are impractical, then one
   /// of [Colors.amber], [Colors.red], or [Colors.indigo] swatches can be used.

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

+// Copyright 2017 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 'package:flutter/rendering.dart';
+
+import 'basic.dart';
+import 'framework.dart';
+
+class _PlaceholderPainter extends CustomPainter {
+  const _PlaceholderPainter({
+    this.color,
+    this.strokeWidth,
+  });
+
+  final Color color;
+  final double strokeWidth;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Paint paint = new Paint()
+      ..color = color
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+    final Rect rect = Offset.zero & size;
+    final Path path = new Path()
+      ..addRect(rect)
+      ..addPolygon(<Offset>[rect.topRight, rect.bottomLeft], false)
+      ..addPolygon(<Offset>[rect.topLeft, rect.bottomRight], false);
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(_PlaceholderPainter oldPainter) {
+    return oldPainter.color != color
+        || oldPainter.strokeWidth != strokeWidth;
+  }
+
+  @override
+  bool hitTest(Offset position) => false;
+}
+
+/// A widget that draws a box that represents where other widgets will one day
+/// be added.
+///
+/// This widget is useful during development to indicate that the interface is
+/// not yet complete.
+///
+/// By default, the placeholder is sized to fit its container. If the
+/// placeholder is in an unbounded space, it will size itself according to the
+/// given [fallbackWidth] and [fallbackHeight].
+class Placeholder extends StatelessWidget {
+  /// Creates a widget which draws a box.
+  const Placeholder({
+    Key key,
+    this.color: const Color(0xFF455A64), // Blue Grey 700
+    this.strokeWidth: 2.0,
+    this.fallbackWidth: 400.0,
+    this.fallbackHeight: 400.0,
+  }) : super(key: key);
+
+  /// The color to draw the placeholder box.
+  final Color color;
+
+  /// The width of the lines in the placeholder box.
+  final double strokeWidth;
+
+  /// The width to use when the placeholder is in a situation with an unbounded
+  /// width.
+  ///
+  /// See also:
+  ///
+  ///  * [fallbackHeight], the same but vertically.
+  final double fallbackWidth;
+
+  /// The height to use when the placeholder is in a situation with an unbounded
+  /// height.
+  ///
+  /// See also:
+  ///
+  ///  * [fallbackWidth], the same but horizontally.
+  final double fallbackHeight;
+
+  @override
+  Widget build(BuildContext context) {
+    return new LimitedBox(
+      maxWidth: fallbackWidth,
+      maxHeight: fallbackHeight,
+      child: new CustomPaint(
+        size: Size.infinite,
+        foregroundPainter: new _PlaceholderPainter(
+          color: color,
+          strokeWidth: strokeWidth,
+        ),
+      ),
+    );
+  }
+}

packages/flutter/lib/widgets.dart

@@ -43,6 +43,7 @@ export 'src/widgets/page_storage.dart';
 export 'src/widgets/page_view.dart';
 export 'src/widgets/pages.dart';
 export 'src/widgets/performance_overlay.dart';
+export 'src/widgets/placeholder.dart';
 export 'src/widgets/preferred_size.dart';
 export 'src/widgets/primary_scroll_controller.dart';
 export 'src/widgets/raw_keyboard_listener.dart';

packages/flutter/test/widgets/framework_test.dart

@@ -11,11 +11,6 @@ class TestState extends State<StatefulWidget> {
   Widget build(BuildContext context) => null;
 }
 
-// TODO(ianh): Remove this once we add the real Placeholder widget
-class Placeholder extends Container {
-  Placeholder({ Key key }) : super(key: key);
-}
-
 void main() {
   testWidgets('UniqueKey control test', (WidgetTester tester) async {
     final Key key = new UniqueKey();
@@ -445,7 +440,7 @@ void main() {
     final GlobalKey key = new GlobalKey();
     await tester.pumpWidget(new Container(key: key));
     expect(log, isEmpty);
-    await tester.pumpWidget(new Placeholder());
+    await tester.pumpWidget(const Placeholder());
     debugPrint = oldCallback;
     debugPrintGlobalKeyedWidgetLifecycle = false;
 

packages/flutter/test/widgets/placeholder_test.dart

+// Copyright 2017 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 'package:flutter_test/flutter_test.dart';
+import 'package:flutter/widgets.dart';
+
+import '../rendering/mock_canvas.dart';
+
+void main() {
+  testWidgets('Placeholder', (WidgetTester tester) async {
+    await tester.pumpWidget(const Placeholder());
+    expect(tester.renderObject<RenderBox>(find.byType(Placeholder)).size, const Size(800.0, 600.0));
+    await tester.pumpWidget(const Center(child: const Placeholder()));
+    expect(tester.renderObject<RenderBox>(find.byType(Placeholder)).size, const Size(800.0, 600.0));
+    await tester.pumpWidget(new Stack(children: <Widget>[const Positioned(top: 0.0, bottom: 0.0, child: const Placeholder())]));
+    expect(tester.renderObject<RenderBox>(find.byType(Placeholder)).size, const Size(400.0, 600.0));
+    await tester.pumpWidget(new Stack(children: <Widget>[const Positioned(left: 0.0, right: 0.0, child: const Placeholder())]));
+    expect(tester.renderObject<RenderBox>(find.byType(Placeholder)).size, const Size(800.0, 400.0));
+    await tester.pumpWidget(new Stack(children: <Widget>[const Positioned(top: 0.0, child: const Placeholder(fallbackWidth: 200.0, fallbackHeight: 300.0))]));
+    expect(tester.renderObject<RenderBox>(find.byType(Placeholder)).size, const Size(200.0, 300.0));
+  });
+
+  testWidgets('Placeholder color', (WidgetTester tester) async {
+    await tester.pumpWidget(const Placeholder());
+    expect(tester.renderObject(find.byType(Placeholder)), paints..path());
+    await tester.pumpWidget(const Placeholder(color: const Color(0xFF00FF00)));
+    expect(tester.renderObject(find.byType(Placeholder)), paints..path(color: const Color(0xFF00FF00)));
+  });
+}