Commit eeea4ab7 authored by Adam Barth's avatar Adam Barth

Icon should use an enum rather than an int for size

Material design icons are defined to work at specific sizes: 18, 24, 36, 48.
The current API doesn't reflect that and just takes a size int. If an invalid
size is chosen an error is printed to the console and no icon shows up.

Fixes #1816
parent 02a1ebab
...@@ -20,7 +20,7 @@ class Field extends StatelessComponent { ...@@ -20,7 +20,7 @@ class Field extends StatelessComponent {
return new Row(<Widget>[ return new Row(<Widget>[
new Padding( new Padding(
padding: const EdgeDims.symmetric(horizontal: 16.0), padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Icon(type: icon, size: 24) child: new Icon(type: icon)
), ),
new Flexible( new Flexible(
child: new Input( child: new Input(
...@@ -43,7 +43,7 @@ class AddressBookHome extends StatelessComponent { ...@@ -43,7 +43,7 @@ class AddressBookHome extends StatelessComponent {
Widget buildFloatingActionButton(BuildContext context) { Widget buildFloatingActionButton(BuildContext context) {
return new FloatingActionButton( return new FloatingActionButton(
child: new Icon(type: 'image/photo_camera', size: 24), child: new Icon(type: 'image/photo_camera'),
backgroundColor: Theme.of(context).accentColor backgroundColor: Theme.of(context).accentColor
); );
} }
......
...@@ -200,7 +200,7 @@ class FeedFragmentState extends State<FeedFragment> { ...@@ -200,7 +200,7 @@ class FeedFragmentState extends State<FeedFragment> {
switch (_fitnessMode) { switch (_fitnessMode) {
case FitnessMode.feed: case FitnessMode.feed:
return new FloatingActionButton( return new FloatingActionButton(
child: new Icon(type: 'content/add', size: 24), child: new Icon(type: 'content/add'),
onPressed: _handleActionButtonPressed onPressed: _handleActionButtonPressed
); );
case FitnessMode.chart: case FitnessMode.chart:
......
...@@ -254,7 +254,7 @@ class StockHomeState extends State<StockHome> { ...@@ -254,7 +254,7 @@ class StockHomeState extends State<StockHome> {
Widget buildFloatingActionButton() { Widget buildFloatingActionButton() {
return new FloatingActionButton( return new FloatingActionButton(
child: new Icon(type: 'content/add', size: 24), child: new Icon(type: 'content/add'),
backgroundColor: Colors.redAccent[200], backgroundColor: Colors.redAccent[200],
onPressed: _handleStockPurchased onPressed: _handleStockPurchased
); );
......
...@@ -63,7 +63,7 @@ Future showStockMenu({BuildContext context, bool autorefresh, ValueChanged<bool> ...@@ -63,7 +63,7 @@ Future showStockMenu({BuildContext context, bool autorefresh, ValueChanged<bool>
child: new Row(<Widget>[ child: new Row(<Widget>[
new Icon( new Icon(
type: 'device/dvr', type: 'device/dvr',
size: 18 size: IconSize.s18
), ),
new Container( new Container(
width: 8.0 width: 8.0
......
...@@ -289,7 +289,7 @@ class CardCollectionState extends State<CardCollection> { ...@@ -289,7 +289,7 @@ class CardCollectionState extends State<CardCollection> {
child: new Container( child: new Container(
height: cardModel.height, height: cardModel.height,
padding: const EdgeDims.all(8.0), padding: const EdgeDims.all(8.0),
child: _editable ? child: _editable ?
new Center( new Center(
child: new Input( child: new Input(
key: new GlobalObjectKey(cardModel), key: new GlobalObjectKey(cardModel),
...@@ -329,11 +329,11 @@ class CardCollectionState extends State<CardCollection> { ...@@ -329,11 +329,11 @@ class CardCollectionState extends State<CardCollection> {
backgroundMessage = "Unsupported dismissDirection"; backgroundMessage = "Unsupported dismissDirection";
} }
Widget leftArrowIcon = new Icon(type: 'navigation/arrow_back', size: 36); Widget leftArrowIcon = new Icon(type: 'navigation/arrow_back', size: IconSize.s36);
if (_dismissDirection == DismissDirection.right) if (_dismissDirection == DismissDirection.right)
leftArrowIcon = new Opacity(opacity: 0.1, child: leftArrowIcon); leftArrowIcon = new Opacity(opacity: 0.1, child: leftArrowIcon);
Widget rightArrowIcon = new Icon(type: 'navigation/arrow_forward', size: 36); Widget rightArrowIcon = new Icon(type: 'navigation/arrow_forward', size: IconSize.s36);
if (_dismissDirection == DismissDirection.left) if (_dismissDirection == DismissDirection.left)
rightArrowIcon = new Opacity(opacity: 0.1, child: rightArrowIcon); rightArrowIcon = new Opacity(opacity: 0.1, child: rightArrowIcon);
......
...@@ -49,7 +49,6 @@ class DrawerItem extends StatelessComponent { ...@@ -49,7 +49,6 @@ class DrawerItem extends StatelessComponent {
padding: const EdgeDims.symmetric(horizontal: 16.0), padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Icon( child: new Icon(
type: icon, type: icon,
size: 24,
colorFilter: _getColorFilter(themeData) colorFilter: _getColorFilter(themeData)
) )
) )
......
...@@ -244,7 +244,7 @@ class DropdownButton<T> extends StatelessComponent { ...@@ -244,7 +244,7 @@ class DropdownButton<T> extends StatelessComponent {
alignment: const FractionalOffset(0.5, 0.0) alignment: const FractionalOffset(0.5, 0.0)
), ),
new Container( new Container(
child: new Icon(type: 'navigation/arrow_drop_down', size: 36), child: new Icon(type: 'navigation/arrow_drop_down', size: IconSize.s36),
padding: const EdgeDims.only(top: 6.0) padding: const EdgeDims.only(top: 6.0)
) )
]) ])
......
...@@ -8,10 +8,24 @@ import 'theme.dart'; ...@@ -8,10 +8,24 @@ import 'theme.dart';
import 'icon_theme.dart'; import 'icon_theme.dart';
import 'icon_theme_data.dart'; import 'icon_theme_data.dart';
enum IconSize {
s18,
s24,
s36,
s48,
}
const Map<IconSize, int> _kIconSize = const <IconSize, int>{
IconSize.s18: 18,
IconSize.s24: 24,
IconSize.s36: 36,
IconSize.s48: 48,
};
class Icon extends StatelessComponent { class Icon extends StatelessComponent {
Icon({ Icon({
Key key, Key key,
this.size, this.size: IconSize.s24,
this.type: '', this.type: '',
this.color, this.color,
this.colorFilter this.colorFilter
...@@ -20,7 +34,7 @@ class Icon extends StatelessComponent { ...@@ -20,7 +34,7 @@ class Icon extends StatelessComponent {
assert(type != null); assert(type != null);
} }
final int size; final IconSize size;
final String type; final String type;
final IconThemeColor color; final IconThemeColor color;
final ColorFilter colorFilter; final ColorFilter colorFilter;
...@@ -55,10 +69,11 @@ class Icon extends StatelessComponent { ...@@ -55,10 +69,11 @@ class Icon extends StatelessComponent {
// Should we use the ios images on ios? // Should we use the ios images on ios?
String density = 'drawable-xxhdpi'; String density = 'drawable-xxhdpi';
String colorSuffix = _getColorSuffix(context); String colorSuffix = _getColorSuffix(context);
int iconSize = _kIconSize[size];
return new AssetImage( return new AssetImage(
name: '$category/$density/ic_${subtype}_${colorSuffix}_${size}dp.png', name: '$category/$density/ic_${subtype}_${colorSuffix}_${iconSize}dp.png',
width: size.toDouble(), width: iconSize.toDouble(),
height: size.toDouble(), height: iconSize.toDouble(),
colorFilter: colorFilter colorFilter: colorFilter
); );
} }
......
...@@ -28,7 +28,6 @@ class IconButton extends StatelessComponent { ...@@ -28,7 +28,6 @@ class IconButton extends StatelessComponent {
padding: const EdgeDims.all(8.0), padding: const EdgeDims.all(8.0),
child: new Icon( child: new Icon(
type: icon, type: icon,
size: 24,
color: color, color: color,
colorFilter: colorFilter colorFilter: colorFilter
) )
......
...@@ -27,7 +27,6 @@ const double _kTabIndicatorHeight = 2.0; ...@@ -27,7 +27,6 @@ const double _kTabIndicatorHeight = 2.0;
const double _kMinTabWidth = 72.0; const double _kMinTabWidth = 72.0;
const double _kMaxTabWidth = 264.0; const double _kMaxTabWidth = 264.0;
const EdgeDims _kTabLabelPadding = const EdgeDims.symmetric(horizontal: 12.0); const EdgeDims _kTabLabelPadding = const EdgeDims.symmetric(horizontal: 12.0);
const int _kTabIconSize = 24;
const double _kTabBarScrollDrag = 0.025; const double _kTabBarScrollDrag = 0.025;
const Duration _kTabBarScroll = const Duration(milliseconds: 200); const Duration _kTabBarScroll = const Duration(milliseconds: 200);
...@@ -321,7 +320,7 @@ class Tab extends StatelessComponent { ...@@ -321,7 +320,7 @@ class Tab extends StatelessComponent {
assert(label.icon != null); assert(label.icon != null);
Color iconColor = selected ? selectedColor : color; Color iconColor = selected ? selectedColor : color;
ColorFilter filter = new ColorFilter.mode(iconColor, TransferMode.srcATop); ColorFilter filter = new ColorFilter.mode(iconColor, TransferMode.srcATop);
return new Icon(type: label.icon, size: _kTabIconSize, colorFilter: filter); return new Icon(type: label.icon, colorFilter: filter);
} }
Widget build(BuildContext context) { Widget build(BuildContext context) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment