Now each Colors.foo constant is-a Color and a color swatch (#8833)
This commit is contained in:
parent
5cf04b6141
commit
031e042eee
@ -32,7 +32,7 @@ class CardCollectionState extends State<CardCollection> {
|
||||
static const double kCardMargins = 8.0;
|
||||
static const double kFixedCardHeight = 100.0;
|
||||
|
||||
Map<int, Color> _primaryColor = Colors.deepPurple;
|
||||
MaterialColor _primaryColor = Colors.deepPurple;
|
||||
List<CardModel> _cardModels;
|
||||
DismissDirection _dismissDirection = DismissDirection.horizontal;
|
||||
TextAlign _textAlign = TextAlign.center;
|
||||
@ -148,7 +148,7 @@ class CardCollectionState extends State<CardCollection> {
|
||||
});
|
||||
}
|
||||
|
||||
void _selectColor(Map<int, Color> selection) {
|
||||
void _selectColor(MaterialColor selection) {
|
||||
setState(() {
|
||||
_primaryColor = selection;
|
||||
});
|
||||
@ -181,14 +181,14 @@ class CardCollectionState extends State<CardCollection> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildDrawerColorRadioItem(String label, Map<int, Color> itemValue, Map<int, Color> currentValue, ValueChanged<Map<int, Color>> onChanged, { IconData icon, bool enabled: true }) {
|
||||
Widget buildDrawerColorRadioItem(String label, MaterialColor itemValue, MaterialColor currentValue, ValueChanged<MaterialColor> onChanged, { IconData icon, bool enabled: true }) {
|
||||
return new DrawerItem(
|
||||
icon: new Icon(icon),
|
||||
onPressed: enabled ? () { onChanged(itemValue); } : null,
|
||||
child: new Row(
|
||||
children: <Widget>[
|
||||
new Expanded(child: new Text(label)),
|
||||
new Radio<Map<int, Color>>(
|
||||
new Radio<MaterialColor>(
|
||||
value: itemValue,
|
||||
groupValue: currentValue,
|
||||
onChanged: enabled ? onChanged : null,
|
||||
|
@ -6,37 +6,37 @@ import 'package:flutter/material.dart';
|
||||
|
||||
const double kColorItemHeight = 48.0;
|
||||
|
||||
class ColorSwatch {
|
||||
ColorSwatch({ this.name, this.colors, this.accentColors, this.threshold: 900});
|
||||
class Palette {
|
||||
Palette({ this.name, this.primary, this.accent, this.threshold: 900});
|
||||
|
||||
final String name;
|
||||
final Map<int, Color> colors;
|
||||
final Map<int, Color> accentColors;
|
||||
final MaterialColor primary;
|
||||
final MaterialAccentColor accent;
|
||||
final int threshold; // titles for indices > threshold are white, otherwise black
|
||||
|
||||
bool get isValid => name != null && colors != null && threshold != null;
|
||||
bool get isValid => name != null && primary != null && threshold != null;
|
||||
}
|
||||
|
||||
final List<ColorSwatch> colorSwatches = <ColorSwatch>[
|
||||
new ColorSwatch(name: 'RED', colors: Colors.red, accentColors: Colors.redAccent, threshold: 300),
|
||||
new ColorSwatch(name: 'PINK', colors: Colors.pink, accentColors: Colors.pinkAccent, threshold: 200),
|
||||
new ColorSwatch(name: 'PURPLE', colors: Colors.purple, accentColors: Colors.purpleAccent, threshold: 200),
|
||||
new ColorSwatch(name: 'DEEP PURPLE', colors: Colors.deepPurple, accentColors: Colors.deepPurpleAccent, threshold: 200),
|
||||
new ColorSwatch(name: 'INDIGO', colors: Colors.indigo, accentColors: Colors.indigoAccent, threshold: 200),
|
||||
new ColorSwatch(name: 'BLUE', colors: Colors.blue, accentColors: Colors.blueAccent, threshold: 400),
|
||||
new ColorSwatch(name: 'LIGHT BLUE', colors: Colors.lightBlue, accentColors: Colors.lightBlueAccent, threshold: 500),
|
||||
new ColorSwatch(name: 'CYAN', colors: Colors.cyan, accentColors: Colors.cyanAccent, threshold: 600),
|
||||
new ColorSwatch(name: 'TEAL', colors: Colors.teal, accentColors: Colors.tealAccent, threshold: 400),
|
||||
new ColorSwatch(name: 'GREEN', colors: Colors.green, accentColors: Colors.greenAccent, threshold: 500),
|
||||
new ColorSwatch(name: 'LIGHT GREEN', colors: Colors.lightGreen, accentColors: Colors.lightGreenAccent, threshold: 600),
|
||||
new ColorSwatch(name: 'LIME', colors: Colors.lime, accentColors: Colors.limeAccent, threshold: 800),
|
||||
new ColorSwatch(name: 'YELLOW', colors: Colors.yellow, accentColors: Colors.yellowAccent),
|
||||
new ColorSwatch(name: 'AMBER', colors: Colors.amber, accentColors: Colors.amberAccent),
|
||||
new ColorSwatch(name: 'ORANGE', colors: Colors.orange, accentColors: Colors.orangeAccent, threshold: 700),
|
||||
new ColorSwatch(name: 'DEEP ORANGE', colors: Colors.deepOrange, accentColors: Colors.deepOrangeAccent, threshold: 400),
|
||||
new ColorSwatch(name: 'BROWN', colors: Colors.brown, threshold: 200),
|
||||
new ColorSwatch(name: 'GREY', colors: Colors.grey, threshold: 500),
|
||||
new ColorSwatch(name: 'BLUE GREY', colors: Colors.blueGrey, threshold: 500),
|
||||
final List<Palette> allPalettes = <Palette>[
|
||||
new Palette(name: 'RED', primary: Colors.red, accent: Colors.redAccent, threshold: 300),
|
||||
new Palette(name: 'PINK', primary: Colors.pink, accent: Colors.pinkAccent, threshold: 200),
|
||||
new Palette(name: 'PURPLE', primary: Colors.purple, accent: Colors.purpleAccent, threshold: 200),
|
||||
new Palette(name: 'DEEP PURPLE', primary: Colors.deepPurple, accent: Colors.deepPurpleAccent, threshold: 200),
|
||||
new Palette(name: 'INDIGO', primary: Colors.indigo, accent: Colors.indigoAccent, threshold: 200),
|
||||
new Palette(name: 'BLUE', primary: Colors.blue, accent: Colors.blueAccent, threshold: 400),
|
||||
new Palette(name: 'LIGHT BLUE', primary: Colors.lightBlue, accent: Colors.lightBlueAccent, threshold: 500),
|
||||
new Palette(name: 'CYAN', primary: Colors.cyan, accent: Colors.cyanAccent, threshold: 600),
|
||||
new Palette(name: 'TEAL', primary: Colors.teal, accent: Colors.tealAccent, threshold: 400),
|
||||
new Palette(name: 'GREEN', primary: Colors.green, accent: Colors.greenAccent, threshold: 500),
|
||||
new Palette(name: 'LIGHT GREEN', primary: Colors.lightGreen, accent: Colors.lightGreenAccent, threshold: 600),
|
||||
new Palette(name: 'LIME', primary: Colors.lime, accent: Colors.limeAccent, threshold: 800),
|
||||
new Palette(name: 'YELLOW', primary: Colors.yellow, accent: Colors.yellowAccent),
|
||||
new Palette(name: 'AMBER', primary: Colors.amber, accent: Colors.amberAccent),
|
||||
new Palette(name: 'ORANGE', primary: Colors.orange, accent: Colors.orangeAccent, threshold: 700),
|
||||
new Palette(name: 'DEEP ORANGE', primary: Colors.deepOrange, accent: Colors.deepOrangeAccent, threshold: 400),
|
||||
new Palette(name: 'BROWN', primary: Colors.brown, threshold: 200),
|
||||
new Palette(name: 'GREY', primary: Colors.grey, threshold: 500),
|
||||
new Palette(name: 'BLUE GREY', primary: Colors.blueGrey, threshold: 500),
|
||||
];
|
||||
|
||||
|
||||
@ -71,29 +71,33 @@ class ColorItem extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class ColorSwatchTabView extends StatelessWidget {
|
||||
ColorSwatchTabView({ Key key, this.swatch }) : super(key: key) {
|
||||
assert(swatch != null && swatch.isValid);
|
||||
class PaletteTabView extends StatelessWidget {
|
||||
static const List<int> primaryKeys = const <int>[50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
||||
static const List<int> accentKeys = const <int>[100, 200, 400, 700];
|
||||
|
||||
PaletteTabView({ Key key, this.colors }) : super(key: key) {
|
||||
assert(colors != null && colors.isValid);
|
||||
}
|
||||
|
||||
final ColorSwatch swatch;
|
||||
final Palette colors;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final TextTheme textTheme = Theme.of(context).textTheme;
|
||||
final TextStyle whiteTextStyle = textTheme.body1.copyWith(color: Colors.white);
|
||||
final TextStyle blackTextStyle = textTheme.body1.copyWith(color: Colors.black);
|
||||
final List<Widget> colorItems = swatch.colors.keys.map((int index) {
|
||||
final List<Widget> colorItems = primaryKeys.map((int index) {
|
||||
return new DefaultTextStyle(
|
||||
style: index > swatch.threshold ? whiteTextStyle : blackTextStyle,
|
||||
child: new ColorItem(index: index, color: swatch.colors[index]),
|
||||
style: index > colors.threshold ? whiteTextStyle : blackTextStyle,
|
||||
child: new ColorItem(index: index, color: colors.primary[index]),
|
||||
);
|
||||
}).toList();
|
||||
|
||||
if (swatch.accentColors != null) {
|
||||
colorItems.addAll(swatch.accentColors.keys.map((int index) {
|
||||
if (colors.accent != null) {
|
||||
colorItems.addAll(accentKeys.map((int index) {
|
||||
return new DefaultTextStyle(
|
||||
style: index > swatch.threshold ? whiteTextStyle : blackTextStyle,
|
||||
child: new ColorItem(index: index, color: swatch.accentColors[index], prefix: 'A'),
|
||||
style: index > colors.threshold ? whiteTextStyle : blackTextStyle,
|
||||
child: new ColorItem(index: index, color: colors.accent[index], prefix: 'A'),
|
||||
);
|
||||
}).toList());
|
||||
}
|
||||
@ -111,19 +115,19 @@ class ColorsDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new DefaultTabController(
|
||||
length: colorSwatches.length,
|
||||
length: allPalettes.length,
|
||||
child: new Scaffold(
|
||||
appBar: new AppBar(
|
||||
elevation: 0,
|
||||
title: new Text('Colors'),
|
||||
bottom: new TabBar(
|
||||
isScrollable: true,
|
||||
tabs: colorSwatches.map((ColorSwatch swatch) => new Tab(text: swatch.name)).toList(),
|
||||
tabs: allPalettes.map((Palette swatch) => new Tab(text: swatch.name)).toList(),
|
||||
),
|
||||
),
|
||||
body: new TabBarView(
|
||||
children: colorSwatches.map((ColorSwatch swatch) {
|
||||
return new ColorSwatchTabView(swatch: swatch);
|
||||
children: allPalettes.map((Palette colors) {
|
||||
return new PaletteTabView(colors: colors);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
|
@ -12,7 +12,7 @@ class IconsDemo extends StatefulWidget {
|
||||
}
|
||||
|
||||
class IconsDemoState extends State<IconsDemo> {
|
||||
static final List<Map<int, Color>> iconColorSwatches = <Map<int, Color>>[
|
||||
static final List<MaterialColor> iconColors = <MaterialColor>[
|
||||
Colors.red,
|
||||
Colors.pink,
|
||||
Colors.purple,
|
||||
@ -31,17 +31,17 @@ class IconsDemoState extends State<IconsDemo> {
|
||||
Colors.deepOrange,
|
||||
Colors.brown,
|
||||
Colors.grey,
|
||||
Colors.blueGrey
|
||||
Colors.blueGrey,
|
||||
];
|
||||
|
||||
int iconColorIndex = 8; // teal
|
||||
double iconOpacity = 1.0;
|
||||
|
||||
Color get iconColor => iconColorSwatches[iconColorIndex][400];
|
||||
Color get iconColor => iconColors[iconColorIndex];
|
||||
|
||||
void handleIconButtonPress() {
|
||||
setState(() {
|
||||
iconColorIndex = (iconColorIndex + 1) % iconColorSwatches.length;
|
||||
iconColorIndex = (iconColorIndex + 1) % iconColors.length;
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -14,7 +14,7 @@ class _Page {
|
||||
_Page({ this.label, this.colors, this.icon });
|
||||
|
||||
final String label;
|
||||
final Map<int, Color> colors;
|
||||
final MaterialColor colors;
|
||||
final IconData icon;
|
||||
|
||||
Color get labelColor => colors != null ? colors[300] : Colors.grey[300];
|
||||
|
@ -31,7 +31,7 @@ class GalleryDrawerHeader extends StatefulWidget {
|
||||
class _GalleryDrawerHeaderState extends State<GalleryDrawerHeader> {
|
||||
bool _logoHasName = true;
|
||||
bool _logoHorizontal = true;
|
||||
Map<int, Color> _swatch = Colors.blue;
|
||||
MaterialColor _logoColor = Colors.blue;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -43,7 +43,8 @@ class _GalleryDrawerHeaderState extends State<GalleryDrawerHeader> {
|
||||
style: _logoHasName ? _logoHorizontal ? FlutterLogoStyle.horizontal
|
||||
: FlutterLogoStyle.stacked
|
||||
: FlutterLogoStyle.markOnly,
|
||||
swatch: _swatch,
|
||||
lightColor: _logoColor.shade400,
|
||||
darkColor: _logoColor.shade900,
|
||||
textColor: config.light ? const Color(0xFF616161) : const Color(0xFF9E9E9E),
|
||||
),
|
||||
duration: const Duration(milliseconds: 750),
|
||||
@ -62,22 +63,22 @@ class _GalleryDrawerHeaderState extends State<GalleryDrawerHeader> {
|
||||
},
|
||||
onDoubleTap: () {
|
||||
setState(() {
|
||||
final List<Map<int, Color>> options = <Map<int, Color>>[];
|
||||
if (_swatch != Colors.blue)
|
||||
options.addAll(<Map<int, Color>>[Colors.blue, Colors.blue, Colors.blue, Colors.blue, Colors.blue, Colors.blue, Colors.blue]);
|
||||
if (_swatch != Colors.amber)
|
||||
options.addAll(<Map<int, Color>>[Colors.amber, Colors.amber, Colors.amber]);
|
||||
if (_swatch != Colors.red)
|
||||
options.addAll(<Map<int, Color>>[Colors.red, Colors.red, Colors.red]);
|
||||
if (_swatch != Colors.indigo)
|
||||
options.addAll(<Map<int, Color>>[Colors.indigo, Colors.indigo, Colors.indigo]);
|
||||
if (_swatch != Colors.pink)
|
||||
options.addAll(<Map<int, Color>>[Colors.pink]);
|
||||
if (_swatch != Colors.purple)
|
||||
options.addAll(<Map<int, Color>>[Colors.purple]);
|
||||
if (_swatch != Colors.cyan)
|
||||
options.addAll(<Map<int, Color>>[Colors.cyan]);
|
||||
_swatch = options[new math.Random().nextInt(options.length)];
|
||||
final List<MaterialColor> options = <MaterialColor>[];
|
||||
if (_logoColor != Colors.blue)
|
||||
options.addAll(<MaterialColor>[Colors.blue, Colors.blue, Colors.blue, Colors.blue, Colors.blue, Colors.blue, Colors.blue]);
|
||||
if (_logoColor != Colors.amber)
|
||||
options.addAll(<MaterialColor>[Colors.amber, Colors.amber, Colors.amber]);
|
||||
if (_logoColor != Colors.red)
|
||||
options.addAll(<MaterialColor>[Colors.red, Colors.red, Colors.red]);
|
||||
if (_logoColor != Colors.indigo)
|
||||
options.addAll(<MaterialColor>[Colors.indigo, Colors.indigo, Colors.indigo]);
|
||||
if (_logoColor != Colors.pink)
|
||||
options.addAll(<MaterialColor>[Colors.pink]);
|
||||
if (_logoColor != Colors.purple)
|
||||
options.addAll(<MaterialColor>[Colors.purple]);
|
||||
if (_logoColor != Colors.cyan)
|
||||
options.addAll(<MaterialColor>[Colors.cyan]);
|
||||
_logoColor = options[new math.Random().nextInt(options.length)];
|
||||
});
|
||||
}
|
||||
)
|
||||
|
@ -18,7 +18,7 @@ class _GesturePainter extends CustomPainter {
|
||||
|
||||
final double zoom;
|
||||
final Offset offset;
|
||||
final Map<int, Color> swatch;
|
||||
final MaterialColor swatch;
|
||||
final bool forward;
|
||||
final bool scaleEnabled;
|
||||
final bool tapEnabled;
|
||||
@ -71,7 +71,7 @@ class _GestureDemoState extends State<GestureDemo> {
|
||||
double _previousZoom;
|
||||
double _zoom = 1.0;
|
||||
|
||||
Map<int, Color> _swatch = Colors.blue;
|
||||
MaterialColor _swatch = Colors.blue;
|
||||
|
||||
bool _forward = true;
|
||||
bool _scaleEnabled = true;
|
||||
@ -106,28 +106,42 @@ class _GestureDemoState extends State<GestureDemo> {
|
||||
|
||||
void _handleColorChange() {
|
||||
setState(() {
|
||||
switch (_swatch) {
|
||||
case Colors.blueGrey: _swatch = Colors.red; break;
|
||||
case Colors.red: _swatch = Colors.pink; break;
|
||||
case Colors.pink: _swatch = Colors.purple; break;
|
||||
case Colors.purple: _swatch = Colors.deepPurple; break;
|
||||
case Colors.deepPurple: _swatch = Colors.indigo; break;
|
||||
case Colors.indigo: _swatch = Colors.blue; break;
|
||||
case Colors.blue: _swatch = Colors.lightBlue; break;
|
||||
case Colors.lightBlue: _swatch = Colors.cyan; break;
|
||||
case Colors.cyan: _swatch = Colors.teal; break;
|
||||
case Colors.teal: _swatch = Colors.green; break;
|
||||
case Colors.green: _swatch = Colors.lightGreen; break;
|
||||
case Colors.lightGreen: _swatch = Colors.lime; break;
|
||||
case Colors.lime: _swatch = Colors.yellow; break;
|
||||
case Colors.yellow: _swatch = Colors.amber; break;
|
||||
case Colors.amber: _swatch = Colors.orange; break;
|
||||
case Colors.orange: _swatch = Colors.deepOrange; break;
|
||||
case Colors.deepOrange: _swatch = Colors.brown; break;
|
||||
case Colors.brown: _swatch = Colors.grey; break;
|
||||
case Colors.grey: _swatch = Colors.blueGrey; break;
|
||||
default: assert(false);
|
||||
}
|
||||
if (_swatch == Colors.blueGrey)
|
||||
_swatch = Colors.red;
|
||||
else if (_swatch == Colors.red)
|
||||
_swatch = Colors.pink;
|
||||
else if (_swatch == Colors.pink)
|
||||
_swatch = Colors.purple;
|
||||
else if (_swatch == Colors.purple)
|
||||
_swatch = Colors.deepPurple;
|
||||
else if (_swatch == Colors.deepPurple)
|
||||
_swatch = Colors.indigo;
|
||||
else if (_swatch == Colors.indigo)
|
||||
_swatch = Colors.blue;
|
||||
else if (_swatch == Colors.blue)
|
||||
_swatch = Colors.lightBlue;
|
||||
else if (_swatch == Colors.lightBlue)
|
||||
_swatch = Colors.cyan;
|
||||
else if (_swatch == Colors.teal)
|
||||
_swatch = Colors.green;
|
||||
else if (_swatch == Colors.green)
|
||||
_swatch = Colors.lightGreen;
|
||||
else if (_swatch == Colors.lightGreen)
|
||||
_swatch = Colors.lime;
|
||||
else if (_swatch == Colors.lime)
|
||||
_swatch = Colors.yellow;
|
||||
else if (_swatch == Colors.yellow)
|
||||
_swatch = Colors.amber;
|
||||
else if (_swatch == Colors.amber)
|
||||
_swatch = Colors.orange;
|
||||
else if (_swatch == Colors.orange)
|
||||
_swatch = Colors.deepOrange;
|
||||
else if (_swatch == Colors.deepOrange)
|
||||
_swatch = Colors.brown;
|
||||
else if (_swatch == Colors.brown)
|
||||
_swatch = Colors.grey;
|
||||
else if (_swatch == Colors.grey)
|
||||
_swatch = Colors.blueGrey;
|
||||
});
|
||||
}
|
||||
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -22,7 +22,7 @@ class FlutterLogo extends StatelessWidget {
|
||||
const FlutterLogo({
|
||||
Key key,
|
||||
this.size,
|
||||
this.swatch: Colors.blue,
|
||||
this.colors,
|
||||
this.textColor: const Color(0xFF616161),
|
||||
this.style: FlutterLogoStyle.markOnly,
|
||||
this.duration: const Duration(milliseconds: 750),
|
||||
@ -38,20 +38,16 @@ class FlutterLogo extends StatelessWidget {
|
||||
/// 24.0.
|
||||
final double size;
|
||||
|
||||
/// The colors to use to paint the logo. This map should contain at least two
|
||||
/// values, one for 400 and one for 900.
|
||||
/// The color swatch to use to paint the logo, Colors.blue by default.
|
||||
///
|
||||
/// If possible, the default should be used. It corresponds to the
|
||||
/// [Colors.blue] swatch.
|
||||
///
|
||||
/// If for some reason that color scheme is impractical, the [Colors.amber],
|
||||
/// [Colors.red], or [Colors.indigo] swatches can be used. These are Flutter's
|
||||
/// secondary colors.
|
||||
/// If for some reason the default colors are impractical, then one
|
||||
/// of [Colors.amber], [Colors.red], or [Colors.indigo] swatches can be used.
|
||||
/// These are Flutter's secondary colors.
|
||||
///
|
||||
/// In extreme cases where none of those four color schemes will work,
|
||||
/// [Colors.pink], [Colors.purple], or [Colors.cyan] swatches can be used.
|
||||
/// These are Flutter's tertiary colors.
|
||||
final Map<int, Color> swatch;
|
||||
final MaterialColor colors;
|
||||
|
||||
/// The color used to paint the "Flutter" text on the logo, if [style] is
|
||||
/// [FlutterLogoStyle.horizontal] or [FlutterLogoStyle.stacked]. The
|
||||
@ -75,13 +71,15 @@ class FlutterLogo extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
final IconThemeData iconTheme = IconTheme.of(context);
|
||||
final double iconSize = size ?? iconTheme.size;
|
||||
final MaterialColor logoColors = colors ?? Colors.blue;
|
||||
return new AnimatedContainer(
|
||||
width: iconSize,
|
||||
height: iconSize,
|
||||
duration: duration,
|
||||
curve: curve,
|
||||
decoration: new FlutterLogoDecoration(
|
||||
swatch: swatch,
|
||||
lightColor: logoColors.shade400,
|
||||
darkColor: logoColors.shade900,
|
||||
style: style,
|
||||
textColor: textColor,
|
||||
),
|
||||
|
@ -76,7 +76,7 @@ Map<MaterialListType, double> kListTileExtent = const <MaterialListType, double>
|
||||
/// * [CircleAvatar], which shows an icon representing a person and is often
|
||||
/// used as the [leading] element of a ListTile.
|
||||
/// * [Divider], which can be used to separate [ListTile]s.
|
||||
/// * [ListTile.divideTiles], a utility for inserting [Divider]s in between [ListTiles]s.
|
||||
/// * [ListTile.divideTiles], a utility for inserting [Divider]s in between [ListTile]s.
|
||||
/// * <https://material.google.com/components/lists.html>
|
||||
class ListTile extends StatelessWidget {
|
||||
/// Creates a list tile.
|
||||
|
@ -70,7 +70,7 @@ class ThemeData {
|
||||
/// more discussion on how to pick the right colors.
|
||||
factory ThemeData({
|
||||
Brightness brightness,
|
||||
Map<int, Color> primarySwatch,
|
||||
MaterialColor primarySwatch,
|
||||
Color primaryColor,
|
||||
Brightness primaryColorBrightness,
|
||||
Color accentColor,
|
||||
|
@ -31,24 +31,19 @@ enum FlutterLogoStyle {
|
||||
stacked,
|
||||
}
|
||||
|
||||
const int _lightShade = 400;
|
||||
const int _darkShade = 900;
|
||||
const Map<int, Color> _kDefaultSwatch = const <int, Color>{
|
||||
_lightShade: const Color(0xFF42A5F5),
|
||||
_darkShade: const Color(0xFF0D47A1)
|
||||
};
|
||||
|
||||
/// An immutable description of how to paint Flutter's logo.
|
||||
class FlutterLogoDecoration extends Decoration {
|
||||
/// Creates a decoration that knows how to paint Flutter's logo.
|
||||
///
|
||||
/// The [swatch] controls the color used for the logo. The [style] controls
|
||||
/// whether and where to draw the "Flutter" label. If one is shown, the
|
||||
/// [textColor] controls the color of the label.
|
||||
/// The [lightColor] and [darkColor] are used to fill the logo. The [style]
|
||||
/// controls whether and where to draw the "Flutter" label. If one is shown,
|
||||
/// the [textColor] controls the color of the label.
|
||||
///
|
||||
/// The [swatch], [textColor], and [style] arguments must not be null.
|
||||
/// The [lightColor], [darkColor], [textColor], and [style] arguments must not
|
||||
/// be null.
|
||||
const FlutterLogoDecoration({
|
||||
this.swatch: _kDefaultSwatch,
|
||||
this.lightColor: const Color(0xFF42A5F5), // Colors.blue[400]
|
||||
this.darkColor: const Color(0xFF0D47A1), // Colors.blue[900]
|
||||
this.textColor: const Color(0xFF616161),
|
||||
this.style: FlutterLogoStyle.markOnly,
|
||||
this.margin: EdgeInsets.zero,
|
||||
@ -56,22 +51,26 @@ 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.textColor, this.style, this._position, this._opacity, this.margin);
|
||||
FlutterLogoDecoration._(this.lightColor, this.darkColor, 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.
|
||||
/// The lighter of the two colors used to paint the logo.
|
||||
///
|
||||
/// If possible, the default should be used. It corresponds to the
|
||||
/// [Colors.blue] swatch from the Material library.
|
||||
/// If possible, the default should be used. It corresponds to the 400 and 900
|
||||
/// values of [Colors.blue] from the Material library.
|
||||
///
|
||||
/// If for some reason that color scheme is impractical, the [Colors.amber],
|
||||
/// [Colors.red], or [Colors.indigo] swatches can be used. These are Flutter's
|
||||
/// secondary colors.
|
||||
/// If for some reason that color scheme is impractical, the same entries from
|
||||
/// [Colors.amber], [Colors.red], or [Colors.indigo] colors can be used. These
|
||||
/// are Flutter's secondary colors.
|
||||
///
|
||||
/// In extreme cases where none of those four color schemes will work,
|
||||
/// [Colors.pink], [Colors.purple], or [Colors.cyan] swatches can be used.
|
||||
/// [Colors.pink], [Colors.purple], or [Colors.cyan] can be used.
|
||||
/// These are Flutter's tertiary colors.
|
||||
final Map<int, Color> swatch;
|
||||
final Color lightColor;
|
||||
|
||||
/// The darker of the two colors used to paint the logo.
|
||||
///
|
||||
/// See [lightColor] for more information about selecting the logo's colors.
|
||||
final Color darkColor;
|
||||
|
||||
/// The color used to paint the "Flutter" text on the logo, if [style] is
|
||||
/// [FlutterLogoStyle.horizontal] or [FlutterLogoStyle.stacked]. The
|
||||
@ -97,9 +96,8 @@ class FlutterLogoDecoration extends Decoration {
|
||||
|
||||
@override
|
||||
bool debugAssertIsValid() {
|
||||
assert(swatch != null
|
||||
&& swatch[_lightShade] != null
|
||||
&& swatch[_darkShade] != null
|
||||
assert(lightColor != null
|
||||
&& darkColor != null
|
||||
&& textColor != null
|
||||
&& style != null
|
||||
&& _position != null
|
||||
@ -126,7 +124,8 @@ class FlutterLogoDecoration extends Decoration {
|
||||
return null;
|
||||
if (a == null) {
|
||||
return new FlutterLogoDecoration._(
|
||||
b.swatch,
|
||||
b.lightColor,
|
||||
b.darkColor,
|
||||
b.textColor,
|
||||
b.style,
|
||||
b._position,
|
||||
@ -136,7 +135,8 @@ class FlutterLogoDecoration extends Decoration {
|
||||
}
|
||||
if (b == null) {
|
||||
return new FlutterLogoDecoration._(
|
||||
a.swatch,
|
||||
a.lightColor,
|
||||
a.darkColor,
|
||||
a.textColor,
|
||||
a.style,
|
||||
a._position,
|
||||
@ -145,7 +145,8 @@ class FlutterLogoDecoration extends Decoration {
|
||||
);
|
||||
}
|
||||
return new FlutterLogoDecoration._(
|
||||
_lerpSwatch(a.swatch, b.swatch, t),
|
||||
Color.lerp(a.lightColor, b.lightColor, t),
|
||||
Color.lerp(a.darkColor, b.darkColor, t),
|
||||
Color.lerp(a.textColor, b.textColor, t),
|
||||
t < 0.5 ? a.style : b.style,
|
||||
a._position + (b._position - a._position) * t,
|
||||
@ -154,15 +155,6 @@ class FlutterLogoDecoration extends Decoration {
|
||||
);
|
||||
}
|
||||
|
||||
static Map<int, Color> _lerpSwatch(Map<int, Color> a, Map<int, Color> b, double t) {
|
||||
assert(a != null);
|
||||
assert(b != null);
|
||||
return <int, Color>{
|
||||
_lightShade: Color.lerp(a[_lightShade], b[_lightShade], t),
|
||||
_darkShade: Color.lerp(a[_darkShade], b[_darkShade], t),
|
||||
};
|
||||
}
|
||||
|
||||
@override
|
||||
FlutterLogoDecoration lerpFrom(Decoration a, double t) {
|
||||
assert(debugAssertIsValid());
|
||||
@ -199,8 +191,8 @@ class FlutterLogoDecoration extends Decoration {
|
||||
if (other is! FlutterLogoDecoration)
|
||||
return false;
|
||||
final FlutterLogoDecoration typedOther = other;
|
||||
return swatch[_lightShade] == typedOther.swatch[_lightShade]
|
||||
&& swatch[_darkShade] == typedOther.swatch[_darkShade]
|
||||
return lightColor == typedOther.lightColor
|
||||
&& darkColor == typedOther.darkColor
|
||||
&& textColor == typedOther.textColor
|
||||
&& _position == typedOther._position
|
||||
&& _opacity == typedOther._opacity;
|
||||
@ -210,8 +202,8 @@ class FlutterLogoDecoration extends Decoration {
|
||||
int get hashCode {
|
||||
assert(debugAssertIsValid());
|
||||
return hashValues(
|
||||
swatch[_lightShade],
|
||||
swatch[_darkShade],
|
||||
lightColor,
|
||||
darkColor,
|
||||
textColor,
|
||||
_position,
|
||||
_opacity
|
||||
@ -221,9 +213,7 @@ class FlutterLogoDecoration extends Decoration {
|
||||
@override
|
||||
String toString([String prefix = '', String prefixIndent ]) {
|
||||
final String extra = _inTransition ? ', transition $_position:$_opacity' : '';
|
||||
if (swatch == null)
|
||||
return '$prefix$runtimeType(null, $style$extra)';
|
||||
return '$prefix$runtimeType(${swatch[_lightShade]}/${swatch[_darkShade]} on $textColor, $style$extra)';
|
||||
return '$prefix$runtimeType($lightColor/$darkColor on $textColor, $style$extra)';
|
||||
}
|
||||
}
|
||||
|
||||
@ -279,11 +269,11 @@ class _FlutterLogoPainter extends BoxPainter {
|
||||
|
||||
// Set up the styles.
|
||||
final Paint lightPaint = new Paint()
|
||||
..color = _config.swatch[_lightShade].withOpacity(0.8);
|
||||
..color = _config.lightColor.withOpacity(0.8);
|
||||
final Paint mediumPaint = new Paint()
|
||||
..color = _config.swatch[_lightShade];
|
||||
..color = _config.lightColor;
|
||||
final Paint darkPaint = new Paint()
|
||||
..color = _config.swatch[_darkShade];
|
||||
..color = _config.darkColor;
|
||||
|
||||
final ui.Gradient triangleGradient = new ui.Gradient.linear(
|
||||
const <Point>[
|
||||
|
86
packages/flutter/test/material/colors_test.dart
Normal file
86
packages/flutter/test/material/colors_test.dart
Normal file
@ -0,0 +1,86 @@
|
||||
// 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:test/test.dart';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
const List<int> primaryKeys = const <int>[50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
||||
const List<int> accentKeys = const <int>[100, 200, 400, 700];
|
||||
|
||||
void main() {
|
||||
test('MaterialColor basic functionality', () {
|
||||
final MaterialColor color = new MaterialColor(
|
||||
500,
|
||||
const <int, Color>{
|
||||
50: const Color(50),
|
||||
100: const Color(100),
|
||||
200: const Color(200),
|
||||
300: const Color(300),
|
||||
400: const Color(400),
|
||||
500: const Color(500),
|
||||
600: const Color(600),
|
||||
700: const Color(700),
|
||||
800: const Color(800),
|
||||
900: const Color(900),
|
||||
},
|
||||
);
|
||||
|
||||
expect(color.value, 500);
|
||||
|
||||
expect(color[50].value, 50);
|
||||
expect(color[100].value, 100);
|
||||
expect(color[200].value, 200);
|
||||
expect(color[300].value, 300);
|
||||
expect(color[400].value, 400);
|
||||
expect(color[500].value, 500);
|
||||
expect(color[600].value, 600);
|
||||
expect(color[700].value, 700);
|
||||
expect(color[800].value, 800);
|
||||
expect(color[900].value, 900);
|
||||
|
||||
expect(color.shade50.value, 50);
|
||||
expect(color.shade100.value, 100);
|
||||
expect(color.shade200.value, 200);
|
||||
expect(color.shade300.value, 300);
|
||||
expect(color.shade400.value, 400);
|
||||
expect(color.shade500.value, 500);
|
||||
expect(color.shade600.value, 600);
|
||||
expect(color.shade700.value, 700);
|
||||
expect(color.shade800.value, 800);
|
||||
expect(color.shade900.value, 900);
|
||||
});
|
||||
|
||||
test('Colors swatches do not contain duplicates', () {
|
||||
for (MaterialColor color in Colors.primaries)
|
||||
expect(primaryKeys.map((int key) => color[key]).toSet().length, primaryKeys.length);
|
||||
|
||||
expect(primaryKeys.map((int key) => Colors.grey[key]).toSet().length, primaryKeys.length);
|
||||
|
||||
for (MaterialAccentColor color in Colors.accents)
|
||||
expect(accentKeys.map((int key) => color[key]).toSet().length, accentKeys.length);
|
||||
});
|
||||
|
||||
test('All color swatch colors are opaque and equal their primary color', () {
|
||||
for (MaterialColor color in Colors.primaries) {
|
||||
expect(color.value, color.shade500.value);
|
||||
for (int key in primaryKeys) {
|
||||
expect(color[key].alpha, 0xFF);
|
||||
}
|
||||
}
|
||||
|
||||
expect(Colors.grey.value, Colors.grey.shade500.value);
|
||||
for (int key in primaryKeys) {
|
||||
expect(Colors.grey[key].alpha, 0xFF);
|
||||
}
|
||||
|
||||
for (MaterialAccentColor color in Colors.accents) {
|
||||
expect(color.value, color.shade200.value);
|
||||
for (int key in accentKeys) {
|
||||
expect(color[key].alpha, 0xFF);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user