Fix the logo widget (#5414)

Some tweaks to the logo widget:

* remove bad assert
* allow text color to be configured
* make logo pretty in dark mode in gallery
* fix some docs

examples/flutter_gallery/lib/gallery/drawer.dart

@@ -19,7 +19,9 @@ class LinkTextSpan extends TextSpan {
 }
 
 class GalleryDrawerHeader extends StatefulWidget {
-  const GalleryDrawerHeader({ Key key }) : super(key: key);
+  const GalleryDrawerHeader({ Key key, this.light }) : super(key: key);
+
+  final bool light;
 
   @override
   _GalleryDrawerHeaderState createState() => new _GalleryDrawerHeaderState();
@@ -41,6 +43,7 @@ class _GalleryDrawerHeaderState extends State<GalleryDrawerHeader> {
                                               : FlutterLogoStyle.stacked
                                               : FlutterLogoStyle.markOnly,
         swatch: _swatch,
+        textColor: config.light ? const Color(0xFF616161) : const Color(0xFF9E9E9E),
       ),
       duration: const Duration(milliseconds: 750),
       child: new GestureDetector(
@@ -113,7 +116,7 @@ class GalleryDrawer extends StatelessWidget {
     return new Drawer(
       child: new Block(
         children: <Widget>[
-          new GalleryDrawerHeader(),
+          new GalleryDrawerHeader(light: useLightTheme),
           new DrawerItem(
             icon: new Icon(Icons.brightness_5),
             onPressed: () { onThemeChanged(true); },

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

@@ -18,13 +18,15 @@ import 'colors.dart';
 class FlutterLogo extends StatelessWidget {
   /// Creates a widget that paints the Flutter logo.
   ///
-  /// The [size] and [color] default to the value given by the current [IconTheme].
+  /// The [size] defaults to the value given by the current [IconTheme].
   const FlutterLogo({
     Key key,
     this.size,
     this.swatch: Colors.blue,
+    this.textColor: const Color(0xFF616161),
     this.style: FlutterLogoStyle.markOnly,
     this.duration: const Duration(milliseconds: 750),
+    this.curve: Curves.fastOutSlowIn,
   }) : super(key: key);
 
   /// The size of the logo in logical pixels.
@@ -51,14 +53,24 @@ class FlutterLogo extends StatelessWidget {
   /// These are Flutter's tertiary colors.
   final Map<int, Color> swatch;
 
+  /// The color used to paint the "Flutter" text on the logo, if [style] is
+  /// [FlutterLogoStyle.horizontal] or [FlutterLogoStyle.stacked]. The
+  /// appropriate color is `const Color(0xFF616161)` (a medium gray), against a
+  /// white background.
+  final Color textColor;
+
   /// Whether and where to draw the "Flutter" text. By default, only the logo
   /// itself is drawn.
   final FlutterLogoStyle style;
 
-  /// The length of time for the animation if the [style] or [swatch] properties
+  /// The length of time for the animation if the [style], [swatch], or
-  /// are changed.
+  /// [textColor] properties are changed.
   final Duration duration;
 
+  /// The curve for the logo animation if the [style], [swatch], or [textColor]
+  /// change.
+  final Curve curve;
+
   @override
   Widget build(BuildContext context) {
     final IconThemeData iconTheme = IconTheme.of(context).fallback();
@@ -67,9 +79,11 @@ class FlutterLogo extends StatelessWidget {
       width: iconSize,
       height: iconSize,
       duration: duration,
+      curve: curve,
       decoration: new FlutterLogoDecoration(
         swatch: swatch,
         style: style,
+        textColor: textColor,
       ),
     );
   }

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

@@ -42,12 +42,14 @@ const Map<int, Color> _kDefaultSwatch = const <int, Color>{
 class FlutterLogoDecoration extends Decoration {
   /// Creates a decoration that knows how to paint Flutter's logo.
   ///
-  /// The [swatch] controls the color used. The [style] controls whether and
+  /// The [swatch] controls the color used for the logo. The [style] controls
-  /// where to draw the "Flutter" label.
+  /// whether and where to draw the "Flutter" label. If one is shown, the
+  /// [textColor] controls the color of the label.
   ///
-  /// The [swatch] and [style] arguments must not be null.
+  /// The [swatch], [textColor], and [style] arguments must not be null.
   const FlutterLogoDecoration({
     this.swatch: _kDefaultSwatch,
+    this.textColor: const Color(0xFF616161),
     FlutterLogoStyle style: FlutterLogoStyle.markOnly,
     this.margin: EdgeInsets.zero,
   }) : style = style,
@@ -55,7 +57,7 @@ class FlutterLogoDecoration extends Decoration {
        // (see https://github.com/dart-lang/sdk/issues/26980 for details about that ignore statement)
        _opacity = 1.0;
 
-  FlutterLogoDecoration._(this.swatch, this.style, this._position, this._opacity, this.margin);
+  FlutterLogoDecoration._(this.swatch, this.textColor, this.style, this._position, this._opacity, this.margin);
 
   /// The colors to use to paint the logo. This map should contain at least two
   /// values, one for 400 and one for 900.
@@ -72,6 +74,12 @@ class FlutterLogoDecoration extends Decoration {
   /// These are Flutter's tertiary colors.
   final Map<int, Color> swatch;
 
+  /// The color used to paint the "Flutter" text on the logo, if [style] is
+  /// [FlutterLogoStyle.horizontal] or [FlutterLogoStyle.stacked]. The
+  /// appropriate color is `const Color(0xFF616161)` (a medium gray), against a
+  /// white background.
+  final Color textColor;
+
   /// Whether and where to draw the "Flutter" text. By default, only the logo
   /// itself is drawn.
   // This property isn't actually used when painting. It's only really used to
@@ -93,6 +101,7 @@ class FlutterLogoDecoration extends Decoration {
     assert(swatch != null
         && swatch[_lightShade] != null
         && swatch[_darkShade] != null
+        && textColor != null
         && style != null
         && _position != null
         && _position.isFinite
@@ -119,6 +128,7 @@ class FlutterLogoDecoration extends Decoration {
     if (a == null) {
       return new FlutterLogoDecoration._(
         b.swatch,
+        b.textColor,
         b.style,
         b._position,
         b._opacity * t.clamp(0.0, 1.0),
@@ -128,6 +138,7 @@ class FlutterLogoDecoration extends Decoration {
     if (b == null) {
       return new FlutterLogoDecoration._(
         a.swatch,
+        a.textColor,
         a.style,
         a._position,
         a._opacity * (1.0 - t).clamp(0.0, 1.0),
@@ -136,6 +147,7 @@ class FlutterLogoDecoration extends Decoration {
     }
     return new FlutterLogoDecoration._(
       _lerpSwatch(a.swatch, b.swatch, t),
+      Color.lerp(a.textColor, b.textColor, t),
       t < 0.5 ? a.style : b.style,
       a._position + (b._position - a._position) * t,
       (a._opacity + (b._opacity - a._opacity) * t).clamp(0.0, 1.0),
@@ -190,6 +202,7 @@ class FlutterLogoDecoration extends Decoration {
     final FlutterLogoDecoration typedOther = other;
     return swatch[_lightShade] == typedOther.swatch[_lightShade]
         && swatch[_darkShade] == typedOther.swatch[_darkShade]
+        && textColor == typedOther.textColor
         && _position == typedOther._position
         && _opacity == typedOther._opacity;
   }
@@ -200,6 +213,7 @@ class FlutterLogoDecoration extends Decoration {
     return hashValues(
       swatch[_lightShade],
       swatch[_darkShade],
+      textColor,
       _position,
       _opacity
     );
@@ -210,7 +224,7 @@ class FlutterLogoDecoration extends Decoration {
     final String extra = _inTransition ? ', transition $_position:$_opacity' : '';
     if (swatch == null)
       return '$prefix$runtimeType(null, $style$extra)';
-    return '$prefix$runtimeType(${swatch[_lightShade]}/${swatch[_darkShade]}, $style$extra)';
+    return '$prefix$runtimeType(${swatch[_lightShade]}/${swatch[_darkShade]} on $textColor, $style$extra)';
   }
 }
 
@@ -219,6 +233,7 @@ class FlutterLogoDecoration extends Decoration {
 class _FlutterLogoPainter extends BoxPainter {
   _FlutterLogoPainter(this._config) : super(null) {
     assert(_config != null);
+    assert(_config.debugAssertValid());
     _prepareText();
   }
 
@@ -234,7 +249,7 @@ class _FlutterLogoPainter extends BoxPainter {
       text: new TextSpan(
         text: kLabel,
         style: new TextStyle(
-          color: const Color(0xFF616161),
+          color: _config.textColor,
           fontFamily: 'Roboto',
           fontSize: 100.0 * 350.0 / 247.0, // 247 is the height of the F when the fontSize is 350, assuming device pixel ratio 1.0
           fontWeight: FontWeight.w300,
@@ -251,8 +266,6 @@ class _FlutterLogoPainter extends BoxPainter {
   // values in the SVG files exported from the original artwork source.
 
   void _paintLogo(Canvas canvas, Rect rect) {
-    assert(rect.width.truncate() == rect.height.truncate());
-
     // Our points are in a coordinate space that's 166 pixels wide and 202 pixels high.
     // First, transform the rectangle so that our coordinate space is a square 202 pixels
     // to a side, with the top left at the origin.