Unverified Commit ebd9a962 authored by Jonah Williams's avatar Jonah Williams Committed by GitHub

Increase contrast of Checkbox, Radio, And Switch widgets (#17637)

parent d2d2fb41
...@@ -98,7 +98,7 @@ class Checkbox extends StatefulWidget { ...@@ -98,7 +98,7 @@ class Checkbox extends StatefulWidget {
/// The color to use when this checkbox is checked. /// The color to use when this checkbox is checked.
/// ///
/// Defaults to accent color of the current [Theme]. /// Defaults to [ThemeData.toggleableActiveColor].
final Color activeColor; final Color activeColor;
/// If true the checkbox's [value] can be true, false, or null. /// If true the checkbox's [value] can be true, false, or null.
...@@ -128,7 +128,7 @@ class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin { ...@@ -128,7 +128,7 @@ class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin {
return new _CheckboxRenderObjectWidget( return new _CheckboxRenderObjectWidget(
value: widget.value, value: widget.value,
tristate: widget.tristate, tristate: widget.tristate,
activeColor: widget.activeColor ?? themeData.accentColor, activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
inactiveColor: widget.onChanged != null ? themeData.unselectedWidgetColor : themeData.disabledColor, inactiveColor: widget.onChanged != null ? themeData.unselectedWidgetColor : themeData.disabledColor,
onChanged: widget.onChanged, onChanged: widget.onChanged,
vsync: this, vsync: this,
......
...@@ -93,7 +93,7 @@ class Radio<T> extends StatefulWidget { ...@@ -93,7 +93,7 @@ class Radio<T> extends StatefulWidget {
/// The color to use when this radio button is selected. /// The color to use when this radio button is selected.
/// ///
/// Defaults to accent color of the current [Theme]. /// Defaults to [ThemeData.toggleableActiveColor].
final Color activeColor; final Color activeColor;
@override @override
...@@ -118,7 +118,7 @@ class _RadioState<T> extends State<Radio<T>> with TickerProviderStateMixin { ...@@ -118,7 +118,7 @@ class _RadioState<T> extends State<Radio<T>> with TickerProviderStateMixin {
final ThemeData themeData = Theme.of(context); final ThemeData themeData = Theme.of(context);
return new _RadioRenderObjectWidget( return new _RadioRenderObjectWidget(
selected: widget.value == widget.groupValue, selected: widget.value == widget.groupValue,
activeColor: widget.activeColor ?? themeData.accentColor, activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
inactiveColor: _getInactiveColor(themeData), inactiveColor: _getInactiveColor(themeData),
onChanged: _enabled ? _handleChanged : null, onChanged: _enabled ? _handleChanged : null,
vsync: this, vsync: this,
......
...@@ -88,12 +88,12 @@ class Switch extends StatefulWidget { ...@@ -88,12 +88,12 @@ class Switch extends StatefulWidget {
/// The color to use when this switch is on. /// The color to use when this switch is on.
/// ///
/// Defaults to accent color of the current [Theme]. /// Defaults to [ThemeData.toggleableActiveColor].
final Color activeColor; final Color activeColor;
/// The color to use on the track when this switch is on. /// The color to use on the track when this switch is on.
/// ///
/// Defaults to accent color of the current [Theme] with the opacity set at 50%. /// Defaults to [ThemeData.toggleableActiveColor] with the opacity set at 50%.
final Color activeTrackColor; final Color activeTrackColor;
/// The color to use on the thumb when this switch is off. /// The color to use on the thumb when this switch is off.
...@@ -130,7 +130,7 @@ class _SwitchState extends State<Switch> with TickerProviderStateMixin { ...@@ -130,7 +130,7 @@ class _SwitchState extends State<Switch> with TickerProviderStateMixin {
final ThemeData themeData = Theme.of(context); final ThemeData themeData = Theme.of(context);
final bool isDark = themeData.brightness == Brightness.dark; final bool isDark = themeData.brightness == Brightness.dark;
final Color activeThumbColor = widget.activeColor ?? themeData.accentColor; final Color activeThumbColor = widget.activeColor ?? themeData.toggleableActiveColor;
final Color activeTrackColor = widget.activeTrackColor ?? activeThumbColor.withAlpha(0x80); final Color activeTrackColor = widget.activeTrackColor ?? activeThumbColor.withAlpha(0x80);
Color inactiveThumbColor; Color inactiveThumbColor;
......
...@@ -93,6 +93,7 @@ class ThemeData extends Diagnosticable { ...@@ -93,6 +93,7 @@ class ThemeData extends Diagnosticable {
Color indicatorColor, Color indicatorColor,
Color hintColor, Color hintColor,
Color errorColor, Color errorColor,
Color toggleableActiveColor,
String fontFamily, String fontFamily,
TextTheme textTheme, TextTheme textTheme,
TextTheme primaryTextTheme, TextTheme primaryTextTheme,
...@@ -114,6 +115,7 @@ class ThemeData extends Diagnosticable { ...@@ -114,6 +115,7 @@ class ThemeData extends Diagnosticable {
primaryColorDark ??= isDark ? Colors.black : primarySwatch[700]; primaryColorDark ??= isDark ? Colors.black : primarySwatch[700];
final bool primaryIsDark = primaryColorBrightness == Brightness.dark; final bool primaryIsDark = primaryColorBrightness == Brightness.dark;
accentColor ??= isDark ? Colors.tealAccent[200] : primarySwatch[500]; accentColor ??= isDark ? Colors.tealAccent[200] : primarySwatch[500];
toggleableActiveColor ??= isDark ? Colors.tealAccent[200] : primarySwatch[600];
accentColorBrightness ??= estimateBrightnessForColor(accentColor); accentColorBrightness ??= estimateBrightnessForColor(accentColor);
final bool accentIsDark = accentColorBrightness == Brightness.dark; final bool accentIsDark = accentColorBrightness == Brightness.dark;
canvasColor ??= isDark ? Colors.grey[850] : Colors.grey[50]; canvasColor ??= isDark ? Colors.grey[850] : Colors.grey[50];
...@@ -186,6 +188,7 @@ class ThemeData extends Diagnosticable { ...@@ -186,6 +188,7 @@ class ThemeData extends Diagnosticable {
unselectedWidgetColor: unselectedWidgetColor, unselectedWidgetColor: unselectedWidgetColor,
disabledColor: disabledColor, disabledColor: disabledColor,
buttonColor: buttonColor, buttonColor: buttonColor,
toggleableActiveColor: toggleableActiveColor,
buttonTheme: buttonTheme, buttonTheme: buttonTheme,
secondaryHeaderColor: secondaryHeaderColor, secondaryHeaderColor: secondaryHeaderColor,
textSelectionColor: textSelectionColor, textSelectionColor: textSelectionColor,
...@@ -243,6 +246,7 @@ class ThemeData extends Diagnosticable { ...@@ -243,6 +246,7 @@ class ThemeData extends Diagnosticable {
@required this.indicatorColor, @required this.indicatorColor,
@required this.hintColor, @required this.hintColor,
@required this.errorColor, @required this.errorColor,
@required this.toggleableActiveColor,
@required this.textTheme, @required this.textTheme,
@required this.primaryTextTheme, @required this.primaryTextTheme,
@required this.accentTextTheme, @required this.accentTextTheme,
...@@ -271,6 +275,7 @@ class ThemeData extends Diagnosticable { ...@@ -271,6 +275,7 @@ class ThemeData extends Diagnosticable {
assert(selectedRowColor != null), assert(selectedRowColor != null),
assert(unselectedWidgetColor != null), assert(unselectedWidgetColor != null),
assert(disabledColor != null), assert(disabledColor != null),
assert(toggleableActiveColor != null),
assert(buttonTheme != null), assert(buttonTheme != null),
assert(secondaryHeaderColor != null), assert(secondaryHeaderColor != null),
assert(textSelectionColor != null), assert(textSelectionColor != null),
...@@ -402,6 +407,10 @@ class ThemeData extends Diagnosticable { ...@@ -402,6 +407,10 @@ class ThemeData extends Diagnosticable {
/// The default fill color of the [Material] used in [RaisedButton]s. /// The default fill color of the [Material] used in [RaisedButton]s.
final Color buttonColor; final Color buttonColor;
/// The color used to highlight the active states of toggleable widgets like
/// [Switch], [Radio], and [Checkbox].
final Color toggleableActiveColor;
/// Defines the default configuration of button widgets, like [RaisedButton] /// Defines the default configuration of button widgets, like [RaisedButton]
/// and [FlatButton]. /// and [FlatButton].
final ButtonThemeData buttonTheme; final ButtonThemeData buttonTheme;
...@@ -504,6 +513,7 @@ class ThemeData extends Diagnosticable { ...@@ -504,6 +513,7 @@ class ThemeData extends Diagnosticable {
Color indicatorColor, Color indicatorColor,
Color hintColor, Color hintColor,
Color errorColor, Color errorColor,
Color toggleableActiveColor,
TextTheme textTheme, TextTheme textTheme,
TextTheme primaryTextTheme, TextTheme primaryTextTheme,
TextTheme accentTextTheme, TextTheme accentTextTheme,
...@@ -544,6 +554,7 @@ class ThemeData extends Diagnosticable { ...@@ -544,6 +554,7 @@ class ThemeData extends Diagnosticable {
indicatorColor: indicatorColor ?? this.indicatorColor, indicatorColor: indicatorColor ?? this.indicatorColor,
hintColor: hintColor ?? this.hintColor, hintColor: hintColor ?? this.hintColor,
errorColor: errorColor ?? this.errorColor, errorColor: errorColor ?? this.errorColor,
toggleableActiveColor: toggleableActiveColor ?? this.toggleableActiveColor,
textTheme: textTheme ?? this.textTheme, textTheme: textTheme ?? this.textTheme,
primaryTextTheme: primaryTextTheme ?? this.primaryTextTheme, primaryTextTheme: primaryTextTheme ?? this.primaryTextTheme,
accentTextTheme: accentTextTheme ?? this.accentTextTheme, accentTextTheme: accentTextTheme ?? this.accentTextTheme,
...@@ -670,6 +681,7 @@ class ThemeData extends Diagnosticable { ...@@ -670,6 +681,7 @@ class ThemeData extends Diagnosticable {
indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t), indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t),
hintColor: Color.lerp(a.hintColor, b.hintColor, t), hintColor: Color.lerp(a.hintColor, b.hintColor, t),
errorColor: Color.lerp(a.errorColor, b.errorColor, t), errorColor: Color.lerp(a.errorColor, b.errorColor, t),
toggleableActiveColor: Color.lerp(a.toggleableActiveColor, b.toggleableActiveColor, t),
textTheme: TextTheme.lerp(a.textTheme, b.textTheme, t), textTheme: TextTheme.lerp(a.textTheme, b.textTheme, t),
primaryTextTheme: TextTheme.lerp(a.primaryTextTheme, b.primaryTextTheme, t), primaryTextTheme: TextTheme.lerp(a.primaryTextTheme, b.primaryTextTheme, t),
accentTextTheme: TextTheme.lerp(a.accentTextTheme, b.accentTextTheme, t), accentTextTheme: TextTheme.lerp(a.accentTextTheme, b.accentTextTheme, t),
...@@ -703,6 +715,7 @@ class ThemeData extends Diagnosticable { ...@@ -703,6 +715,7 @@ class ThemeData extends Diagnosticable {
(otherData.unselectedWidgetColor == unselectedWidgetColor) && (otherData.unselectedWidgetColor == unselectedWidgetColor) &&
(otherData.disabledColor == disabledColor) && (otherData.disabledColor == disabledColor) &&
(otherData.buttonColor == buttonColor) && (otherData.buttonColor == buttonColor) &&
(otherData.toggleableActiveColor == toggleableActiveColor) &&
(otherData.buttonTheme == buttonTheme) && (otherData.buttonTheme == buttonTheme) &&
(otherData.secondaryHeaderColor == secondaryHeaderColor) && (otherData.secondaryHeaderColor == secondaryHeaderColor) &&
(otherData.textSelectionColor == textSelectionColor) && (otherData.textSelectionColor == textSelectionColor) &&
...@@ -749,6 +762,7 @@ class ThemeData extends Diagnosticable { ...@@ -749,6 +762,7 @@ class ThemeData extends Diagnosticable {
textSelectionColor, textSelectionColor,
textSelectionHandleColor, textSelectionHandleColor,
hashValues( // Too many values. hashValues( // Too many values.
toggleableActiveColor,
backgroundColor, backgroundColor,
accentColor, accentColor,
accentColorBrightness, accentColorBrightness,
...@@ -799,6 +813,7 @@ class ThemeData extends Diagnosticable { ...@@ -799,6 +813,7 @@ class ThemeData extends Diagnosticable {
properties.add(new DiagnosticsProperty<Color>('indicatorColor', indicatorColor, defaultValue: defaultData.indicatorColor)); properties.add(new DiagnosticsProperty<Color>('indicatorColor', indicatorColor, defaultValue: defaultData.indicatorColor));
properties.add(new DiagnosticsProperty<Color>('hintColor', hintColor, defaultValue: defaultData.hintColor)); properties.add(new DiagnosticsProperty<Color>('hintColor', hintColor, defaultValue: defaultData.hintColor));
properties.add(new DiagnosticsProperty<Color>('errorColor', errorColor, defaultValue: defaultData.errorColor)); properties.add(new DiagnosticsProperty<Color>('errorColor', errorColor, defaultValue: defaultData.errorColor));
properties.add(new DiagnosticsProperty<Color>('toggleableActiveColor', toggleableActiveColor, defaultValue: defaultData.toggleableActiveColor));
properties.add(new DiagnosticsProperty<ButtonThemeData>('buttonTheme', buttonTheme)); properties.add(new DiagnosticsProperty<ButtonThemeData>('buttonTheme', buttonTheme));
properties.add(new DiagnosticsProperty<TextTheme>('textTheme', textTheme)); properties.add(new DiagnosticsProperty<TextTheme>('textTheme', textTheme));
properties.add(new DiagnosticsProperty<TextTheme>('primaryTextTheme', primaryTextTheme)); properties.add(new DiagnosticsProperty<TextTheme>('primaryTextTheme', primaryTextTheme));
......
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