Merge pull request #1702 from Hixie/checked-mode

Add a "SLOW MODE" banner in checked mode

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

@@ -50,7 +50,8 @@ class MaterialApp extends StatefulComponent {
     this.onLocaleChanged,
     this.debugShowMaterialGrid: false,
     this.showPerformanceOverlay: false,
-    this.showSemanticsDebugger: false
+    this.showSemanticsDebugger: false,
+    this.debugShowCheckedModeBanner: true
   }) : super(key: key) {
     assert(routes != null);
     assert(routes.containsKey(Navigator.defaultRouteName) || onGenerateRoute != null);
@@ -59,15 +60,55 @@ class MaterialApp extends StatefulComponent {
     assert(showSemanticsDebugger != null);
   }
 
+  /// A one-line description of this app for use in the window manager.
   final String title;
+
+  /// The colors to use for the application's widgets.
   final ThemeData theme;
+
+  /// The default table of routes for the application. When the
+  /// [Navigator] is given a named route, the name will be looked up
+  /// in this table first. If the name is not available, then
+  /// [onGenerateRoute] will be called instead.
   final Map<String, RouteBuilder> routes;
+
+  /// The route generator callback used when the app is navigated to a
+  /// named route but the name is not in the [routes] table.
   final RouteFactory onGenerateRoute;
+
+  /// Callback that is invoked when the operating system changes the
+  /// current locale.
   final LocaleChangedCallback onLocaleChanged;
+
+  /// Turns on a [GridPaper] overlay that paints a baseline grid
+  /// Material apps:
+  /// https://www.google.com/design/spec/layout/metrics-keylines.html
+  /// Only available in checked mode.
   final bool debugShowMaterialGrid;
+
+  /// Turns on a performance overlay.
+  /// https://flutter.io/debugging/#performanceoverlay
   final bool showPerformanceOverlay;
+
+  /// Turns on an overlay that shows the accessibility information
+  /// reported by the framework.
   final bool showSemanticsDebugger;
 
+  /// Turns on a "SLOW MODE" little banner in checked mode to indicate
+  /// that the app is in checked mode. This is on by default (in
+  /// checked mode), to turn it off, set the constructor argument to
+  /// false. In release mode this has no effect.
+  ///
+  /// To get this banner in your application if you're not using
+  /// MaterialApp, include a [CheckedModeBanner] widget in your app.
+  ///
+  /// This banner is intended to avoid people complaining that your
+  /// app is slow when it's in checked mode. In checked mode, Flutter
+  /// enables a large number of expensive diagnostics to aid in
+  /// development, and so performance in checked mode is not
+  /// representative of what will happen in release mode.
+  final bool debugShowCheckedModeBanner;
+
   _MaterialAppState createState() => new _MaterialAppState();
 }
 
@@ -203,6 +244,14 @@ class _MaterialAppState extends State<MaterialApp> implements BindingObserver {
         child: result
       );
     }
+    assert(() {
+      if (config.debugShowCheckedModeBanner) {
+        result = new CheckedModeBanner(
+          child: result
+        );
+      }
+      return true;
+    });
     return result;
   }
 

packages/flutter/lib/src/widgets/checked_mode_banner.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:math' as math;
+import 'dart:ui' as ui;
+
+import 'package:flutter/painting.dart';
+import 'package:flutter/rendering.dart';
+
+import 'basic.dart';
+import 'framework.dart';
+
+class _CheckedModeBannerPainter extends CustomPainter {
+  const _CheckedModeBannerPainter();
+
+  static const kColor = const Color(0xA0B71C1C);
+  static const kOffset = 40.0; // distance to bottom of banner, at a 45 degree angle inwards from the top right corner
+  static const kHeight = 12.0; // height of banner
+  static const kTextAlign = const Offset(0.0, -3.0); // offset to move text up
+  static const kFontSize = kHeight * 0.85;
+  static const kShadowBlur = 8.0; // shadow blur sigma
+  static final Rect kRect = new Rect.fromLTWH(-kOffset, kOffset-kHeight, kOffset * 2.0, kHeight);
+  static const TextStyle kTextStyles = const TextStyle(
+    color: const Color(0xFFFFFFFF),
+    fontSize: kFontSize,
+    fontWeight: FontWeight.w900,
+    textAlign: TextAlign.center
+  );
+
+  static final TextPainter textPainter = new TextPainter()
+    ..text = new StyledTextSpan(kTextStyles, <TextSpan>[new PlainTextSpan('SLOW MODE')])
+    ..maxWidth = kOffset * 2.0
+    ..maxHeight = kHeight
+    ..layout();
+
+  void paint(Canvas canvas, Size size) {
+    final Paint paintShadow = new Paint()
+      ..color = const Color(0x7F000000)
+      ..maskFilter = new ui.MaskFilter.blur(ui.BlurStyle.normal, kShadowBlur);
+    final Paint paintBanner = new Paint()
+      ..color = kColor;
+    canvas
+     ..translate(size.width, 0.0)
+     ..rotate(math.PI/4)
+     ..drawRect(kRect, paintShadow)
+     ..drawRect(kRect, paintBanner);
+    textPainter.paint(canvas, kRect.topLeft.toOffset() + kTextAlign);
+  }
+
+  bool shouldRepaint(_CheckedModeBannerPainter oldPainter) => false;
+  bool hitTest(Point position) => false;
+}
+
+/// Displays a banner saying "CHECKED" when running in checked mode.
+/// Does nothing in release mode.
+class CheckedModeBanner extends StatelessComponent {
+  CheckedModeBanner({
+    Key key,
+    this.child
+  }) : super(key: key);
+
+  final Widget child;
+
+  Widget build(BuildContext context) {
+    Widget result = child;
+    assert(() {
+      result = new CustomPaint(
+        foregroundPainter: const _CheckedModeBannerPainter(),
+        child: result
+      );
+      return true;
+    });
+    return result;
+  }
+}

packages/flutter/lib/widgets.dart

@@ -8,6 +8,7 @@ library widgets;
 export 'src/widgets/asset_vendor.dart';
 export 'src/widgets/basic.dart';
 export 'src/widgets/binding.dart';
+export 'src/widgets/checked_mode_banner.dart';
 export 'src/widgets/child_view.dart';
 export 'src/widgets/dismissable.dart';
 export 'src/widgets/drag_target.dart';