Simplify colorizing icons

Now you can colorize an Icon simply by proving a Color for the Icon.

examples/stocks/lib/stock_home.dart

@@ -230,7 +230,7 @@ class StockHomeState extends State<StockHome> {
     return new ToolBar(
       left: new IconButton(
         icon: 'navigation/arrow_back',
-        colorFilter: new ColorFilter.mode(Theme.of(context).accentColor, ui.TransferMode.srcATop),
+        color: Theme.of(context).accentColor,
         onPressed: _handleSearchEnd,
         tooltip: 'Back'
       ),

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

@@ -19,9 +19,6 @@ const TextStyle _kLabelStyle = const TextStyle(
   textBaseline: TextBaseline.alphabetic
 );
 
-final ColorFilter _kIconColorFilter = new ColorFilter.mode(
-  Colors.black54, TransferMode.dstIn);
-
 class Chip extends StatelessComponent {
   const Chip({
     Key key,
@@ -66,7 +63,7 @@ class Chip extends StatelessComponent {
           child: new Icon(
             icon: 'navigation/cancel',
             size: IconSize.s18,
-            colorFilter: _kIconColorFilter
+            color: Colors.black54
           )
         )
       ));

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

@@ -23,13 +23,13 @@ class DrawerItem extends StatelessComponent {
   final VoidCallback onPressed;
   final bool selected;
 
-  ColorFilter _getIconColorFilter(ThemeData themeData) {
+  Color _getIconColor(ThemeData themeData) {
     if (selected) {
       if (themeData.brightness == ThemeBrightness.dark)
-        return new ColorFilter.mode(themeData.accentColor, TransferMode.srcATop);
-      return new ColorFilter.mode(themeData.primaryColor, TransferMode.srcATop);
+        return themeData.accentColor;
+      return themeData.primaryColor;
     }
-    return new ColorFilter.mode(Colors.black45, TransferMode.dstIn);
+    return Colors.black45;
   }
 
   TextStyle _getTextStyle(ThemeData themeData) {
@@ -53,7 +53,7 @@ class DrawerItem extends StatelessComponent {
           padding: const EdgeDims.symmetric(horizontal: 16.0),
           child: new Icon(
             icon: icon,
-            colorFilter: _getIconColorFilter(themeData)
+            color: _getIconColor(themeData)
           )
         )
       );

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

@@ -27,8 +27,8 @@ class Icon extends StatelessComponent {
     Key key,
     this.size: IconSize.s24,
     this.icon: '',
-    this.color,
-    this.colorFilter
+    this.colorTheme,
+    this.color
   }) : super(key: key) {
     assert(size != null);
     assert(icon != null);
@@ -36,11 +36,11 @@ class Icon extends StatelessComponent {
 
   final IconSize size;
   final String icon;
-  final IconThemeColor color;
-  final ColorFilter colorFilter;
+  final IconThemeColor colorTheme;
+  final Color color;
 
   String _getColorSuffix(BuildContext context) {
-    IconThemeColor iconThemeColor = color;
+    IconThemeColor iconThemeColor = colorTheme;
     if (iconThemeColor == null) {
       IconThemeData iconThemeData = IconTheme.of(context);
       iconThemeColor = iconThemeData == null ? null : iconThemeData.color;
@@ -74,7 +74,7 @@ class Icon extends StatelessComponent {
       name: '$category/$density/ic_${subtype}_${colorSuffix}_${iconSize}dp.png',
       width: iconSize.toDouble(),
       height: iconSize.toDouble(),
-      colorFilter: colorFilter
+      color: color
     );
   }
 

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

@@ -13,15 +13,15 @@ class IconButton extends StatelessComponent {
   const IconButton({
     Key key,
     this.icon,
+    this.colorTheme,
     this.color,
-    this.colorFilter,
     this.onPressed,
     this.tooltip
   }) : super(key: key);
 
   final String icon;
-  final IconThemeColor color;
-  final ColorFilter colorFilter;
+  final IconThemeColor colorTheme;
+  final Color color;
   final VoidCallback onPressed;
   final String tooltip;
 
@@ -32,8 +32,8 @@ class IconButton extends StatelessComponent {
         padding: const EdgeDims.all(8.0),
         child: new Icon(
           icon: icon,
-          color: color,
-          colorFilter: colorFilter
+          colorTheme: colorTheme,
+          color: color
         )
       )
     );
@@ -51,8 +51,8 @@ class IconButton extends StatelessComponent {
     description.add('$icon');
     if (onPressed == null)
       description.add('disabled');
-    if (color != null)
-      description.add('$color');
+    if (colorTheme != null)
+      description.add('$colorTheme');
     if (tooltip != null)
       description.add('tooltip: "$tooltip"');
   }

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

@@ -319,8 +319,7 @@ class _Tab extends StatelessComponent {
 
   Widget _buildLabelIcon() {
     assert(label.icon != null);
-    ColorFilter filter = new ColorFilter.mode(color, TransferMode.srcATop);
-    return new Icon(icon: label.icon, colorFilter: filter);
+    return new Icon(icon: label.icon, color: color);
   }
 
   Widget build(BuildContext context) {

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

@@ -117,7 +117,7 @@ class _TwoLevelSublistState extends State<TwoLevelSublist> {
               turns: _iconTurns,
               child: new Icon(
                 icon: 'navigation/expand_more',
-                colorFilter: new ColorFilter.mode(_iconColor.evaluate(_easeInAnimation), TransferMode.srcATop)
+                color: _iconColor.evaluate(_easeInAnimation)
               )
             )
           ),

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

@@ -22,7 +22,7 @@ class RenderImage extends RenderBox {
     ui.Image image,
     double width,
     double height,
-    ColorFilter colorFilter,
+    Color color,
     ImageFit fit,
     FractionalOffset alignment,
     ImageRepeat repeat: ImageRepeat.noRepeat,
@@ -30,11 +30,13 @@ class RenderImage extends RenderBox {
   }) : _image = image,
       _width = width,
       _height = height,
-      _colorFilter = colorFilter,
+      _color = color,
       _fit = fit,
       _alignment = alignment,
       _repeat = repeat,
-      _centerSlice = centerSlice;
+      _centerSlice = centerSlice {
+    _updateColorFilter();
+  }
 
   /// The image to display.
   ui.Image get image => _image;
@@ -74,13 +76,24 @@ class RenderImage extends RenderBox {
     markNeedsLayout();
   }
 
-  /// If non-null, apply this color filter to the image before painint.
-  ColorFilter get colorFilter => _colorFilter;
   ColorFilter _colorFilter;
-  void set colorFilter (ColorFilter value) {
-    if (value == _colorFilter)
+
+  // Should we make the transfer mode configurable?
+  void _updateColorFilter() {
+    if (_color == null)
+      _colorFilter = null;
+    else
+      _colorFilter = new ColorFilter.mode(_color, TransferMode.srcIn);
+  }
+
+  /// If non-null, apply this color filter to the image before painting.
+  Color get color => _color;
+  Color _color;
+  void set color (Color value) {
+    if (value == _color)
       return;
-    _colorFilter = value;
+    _color = value;
+    _updateColorFilter();
     markNeedsPaint();
   }
 

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

@@ -1482,7 +1482,7 @@ class RawImage extends LeafRenderObjectWidget {
     this.image,
     this.width,
     this.height,
-    this.colorFilter,
+    this.color,
     this.fit,
     this.alignment,
     this.repeat: ImageRepeat.noRepeat,
@@ -1504,8 +1504,8 @@ class RawImage extends LeafRenderObjectWidget {
   /// aspect ratio.
   final double height;
 
-  /// If non-null, apply this color filter to the image before painint.
-  final ColorFilter colorFilter;
+  /// If non-null, apply this color filter to the image before painting.
+  final Color color;
 
   /// How to inscribe the image into the place allocated during layout.
   final ImageFit fit;
@@ -1533,7 +1533,7 @@ class RawImage extends LeafRenderObjectWidget {
     image: image,
     width: width,
     height: height,
-    colorFilter: colorFilter,
+    color: color,
     fit: fit,
     alignment: alignment,
     repeat: repeat,
@@ -1543,7 +1543,7 @@ class RawImage extends LeafRenderObjectWidget {
     renderObject.image = image;
     renderObject.width = width;
     renderObject.height = height;
-    renderObject.colorFilter = colorFilter;
+    renderObject.color = color;
     renderObject.alignment = alignment;
     renderObject.fit = fit;
     renderObject.repeat = repeat;
@@ -1566,7 +1566,7 @@ class RawImageResource extends StatefulComponent {
     this.image,
     this.width,
     this.height,
-    this.colorFilter,
+    this.color,
     this.fit,
     this.alignment,
     this.repeat: ImageRepeat.noRepeat,
@@ -1590,8 +1590,8 @@ class RawImageResource extends StatefulComponent {
   /// aspect ratio.
   final double height;
 
-  /// If non-null, apply this color filter to the image before painint.
-  final ColorFilter colorFilter;
+  /// If non-null, apply this color filter to the image before painting.
+  final Color color;
 
   /// How to inscribe the image into the place allocated during layout.
   final ImageFit fit;
@@ -1649,7 +1649,7 @@ class _ImageListenerState extends State<RawImageResource> {
       image: _resolvedImage,
       width: config.width,
       height: config.height,
-      colorFilter: config.colorFilter,
+      color: config.color,
       fit: config.fit,
       alignment: config.alignment,
       repeat: config.repeat,
@@ -1665,7 +1665,7 @@ class NetworkImage extends StatelessComponent {
     this.src,
     this.width,
     this.height,
-    this.colorFilter,
+    this.color,
     this.fit,
     this.alignment,
     this.repeat: ImageRepeat.noRepeat,
@@ -1687,8 +1687,8 @@ class NetworkImage extends StatelessComponent {
   /// aspect ratio.
   final double height;
 
-  /// If non-null, apply this color filter to the image before painint.
-  final ColorFilter colorFilter;
+  /// If non-null, apply this color filter to the image before painting.
+  final Color color;
 
   /// How to inscribe the image into the place allocated during layout.
   final ImageFit fit;
@@ -1717,7 +1717,7 @@ class NetworkImage extends StatelessComponent {
       image: imageCache.load(src),
       width: width,
       height: height,
-      colorFilter: colorFilter,
+      color: color,
       fit: fit,
       alignment: alignment,
       repeat: repeat,
@@ -1763,7 +1763,7 @@ class AsyncImage extends StatelessComponent {
     this.provider,
     this.width,
     this.height,
-    this.colorFilter,
+    this.color,
     this.fit,
     this.alignment,
     this.repeat: ImageRepeat.noRepeat,
@@ -1785,8 +1785,8 @@ class AsyncImage extends StatelessComponent {
   /// aspect ratio.
   final double height;
 
-  /// If non-null, apply this color filter to the image before painint.
-  final ColorFilter colorFilter;
+  /// If non-null, apply this color filter to the image before painting.
+  final Color color;
 
   /// How to inscribe the image into the place allocated during layout.
   final ImageFit fit;
@@ -1815,7 +1815,7 @@ class AsyncImage extends StatelessComponent {
       image: imageCache.loadProvider(provider),
       width: width,
       height: height,
-      colorFilter: colorFilter,
+      color: color,
       fit: fit,
       alignment: alignment,
       repeat: repeat,
@@ -1837,7 +1837,7 @@ class AssetImage extends StatelessComponent {
     this.bundle,
     this.width,
     this.height,
-    this.colorFilter,
+    this.color,
     this.fit,
     this.alignment,
     this.repeat: ImageRepeat.noRepeat,
@@ -1865,8 +1865,8 @@ class AssetImage extends StatelessComponent {
   /// aspect ratio.
   final double height;
 
-  /// If non-null, apply this color filter to the image before painint.
-  final ColorFilter colorFilter;
+  /// If non-null, apply this color filter to the image before painting.
+  final Color color;
 
   /// How to inscribe the image into the place allocated during layout.
   final ImageFit fit;
@@ -1895,7 +1895,7 @@ class AssetImage extends StatelessComponent {
       image: (bundle ?? DefaultAssetBundle.of(context)).loadImage(name),
       width: width,
       height: height,
-      colorFilter: colorFilter,
+      color: color,
       fit: fit,
       alignment: alignment,
       repeat: repeat,