From ebd9a9621df3f9b91a28a0a62d7a8b14aff9818e Mon Sep 17 00:00:00 2001 From: Jonah Williams Date: Tue, 15 May 2018 17:55:45 -0700 Subject: [PATCH] Increase contrast of Checkbox, Radio, And Switch widgets (#17637) --- packages/flutter/lib/src/material/checkbox.dart | 4 ++-- packages/flutter/lib/src/material/radio.dart | 4 ++-- packages/flutter/lib/src/material/switch.dart | 6 +++--- packages/flutter/lib/src/material/theme_data.dart | 15 +++++++++++++++ 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/flutter/lib/src/material/checkbox.dart b/packages/flutter/lib/src/material/checkbox.dart index 7bad9c79af..949a720b10 100644 --- a/packages/flutter/lib/src/material/checkbox.dart +++ b/packages/flutter/lib/src/material/checkbox.dart @@ -98,7 +98,7 @@ class Checkbox extends StatefulWidget { /// The color to use when this checkbox is checked. /// - /// Defaults to accent color of the current [Theme]. + /// Defaults to [ThemeData.toggleableActiveColor]. final Color activeColor; /// If true the checkbox's [value] can be true, false, or null. @@ -128,7 +128,7 @@ class _CheckboxState extends State with TickerProviderStateMixin { return new _CheckboxRenderObjectWidget( value: widget.value, tristate: widget.tristate, - activeColor: widget.activeColor ?? themeData.accentColor, + activeColor: widget.activeColor ?? themeData.toggleableActiveColor, inactiveColor: widget.onChanged != null ? themeData.unselectedWidgetColor : themeData.disabledColor, onChanged: widget.onChanged, vsync: this, diff --git a/packages/flutter/lib/src/material/radio.dart b/packages/flutter/lib/src/material/radio.dart index 038fcb6641..c901bde4f8 100644 --- a/packages/flutter/lib/src/material/radio.dart +++ b/packages/flutter/lib/src/material/radio.dart @@ -93,7 +93,7 @@ class Radio extends StatefulWidget { /// 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; @override @@ -118,7 +118,7 @@ class _RadioState extends State> with TickerProviderStateMixin { final ThemeData themeData = Theme.of(context); return new _RadioRenderObjectWidget( selected: widget.value == widget.groupValue, - activeColor: widget.activeColor ?? themeData.accentColor, + activeColor: widget.activeColor ?? themeData.toggleableActiveColor, inactiveColor: _getInactiveColor(themeData), onChanged: _enabled ? _handleChanged : null, vsync: this, diff --git a/packages/flutter/lib/src/material/switch.dart b/packages/flutter/lib/src/material/switch.dart index 208635fcef..2e997121ce 100644 --- a/packages/flutter/lib/src/material/switch.dart +++ b/packages/flutter/lib/src/material/switch.dart @@ -88,12 +88,12 @@ class Switch extends StatefulWidget { /// The color to use when this switch is on. /// - /// Defaults to accent color of the current [Theme]. + /// Defaults to [ThemeData.toggleableActiveColor]. final Color activeColor; /// 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; /// The color to use on the thumb when this switch is off. @@ -130,7 +130,7 @@ class _SwitchState extends State with TickerProviderStateMixin { final ThemeData themeData = Theme.of(context); 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); Color inactiveThumbColor; diff --git a/packages/flutter/lib/src/material/theme_data.dart b/packages/flutter/lib/src/material/theme_data.dart index 6e6e80f767..ab211c9989 100644 --- a/packages/flutter/lib/src/material/theme_data.dart +++ b/packages/flutter/lib/src/material/theme_data.dart @@ -93,6 +93,7 @@ class ThemeData extends Diagnosticable { Color indicatorColor, Color hintColor, Color errorColor, + Color toggleableActiveColor, String fontFamily, TextTheme textTheme, TextTheme primaryTextTheme, @@ -114,6 +115,7 @@ class ThemeData extends Diagnosticable { primaryColorDark ??= isDark ? Colors.black : primarySwatch[700]; final bool primaryIsDark = primaryColorBrightness == Brightness.dark; accentColor ??= isDark ? Colors.tealAccent[200] : primarySwatch[500]; + toggleableActiveColor ??= isDark ? Colors.tealAccent[200] : primarySwatch[600]; accentColorBrightness ??= estimateBrightnessForColor(accentColor); final bool accentIsDark = accentColorBrightness == Brightness.dark; canvasColor ??= isDark ? Colors.grey[850] : Colors.grey[50]; @@ -186,6 +188,7 @@ class ThemeData extends Diagnosticable { unselectedWidgetColor: unselectedWidgetColor, disabledColor: disabledColor, buttonColor: buttonColor, + toggleableActiveColor: toggleableActiveColor, buttonTheme: buttonTheme, secondaryHeaderColor: secondaryHeaderColor, textSelectionColor: textSelectionColor, @@ -243,6 +246,7 @@ class ThemeData extends Diagnosticable { @required this.indicatorColor, @required this.hintColor, @required this.errorColor, + @required this.toggleableActiveColor, @required this.textTheme, @required this.primaryTextTheme, @required this.accentTextTheme, @@ -271,6 +275,7 @@ class ThemeData extends Diagnosticable { assert(selectedRowColor != null), assert(unselectedWidgetColor != null), assert(disabledColor != null), + assert(toggleableActiveColor != null), assert(buttonTheme != null), assert(secondaryHeaderColor != null), assert(textSelectionColor != null), @@ -402,6 +407,10 @@ class ThemeData extends Diagnosticable { /// The default fill color of the [Material] used in [RaisedButton]s. 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] /// and [FlatButton]. final ButtonThemeData buttonTheme; @@ -504,6 +513,7 @@ class ThemeData extends Diagnosticable { Color indicatorColor, Color hintColor, Color errorColor, + Color toggleableActiveColor, TextTheme textTheme, TextTheme primaryTextTheme, TextTheme accentTextTheme, @@ -544,6 +554,7 @@ class ThemeData extends Diagnosticable { indicatorColor: indicatorColor ?? this.indicatorColor, hintColor: hintColor ?? this.hintColor, errorColor: errorColor ?? this.errorColor, + toggleableActiveColor: toggleableActiveColor ?? this.toggleableActiveColor, textTheme: textTheme ?? this.textTheme, primaryTextTheme: primaryTextTheme ?? this.primaryTextTheme, accentTextTheme: accentTextTheme ?? this.accentTextTheme, @@ -670,6 +681,7 @@ class ThemeData extends Diagnosticable { indicatorColor: Color.lerp(a.indicatorColor, b.indicatorColor, t), hintColor: Color.lerp(a.hintColor, b.hintColor, 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), primaryTextTheme: TextTheme.lerp(a.primaryTextTheme, b.primaryTextTheme, t), accentTextTheme: TextTheme.lerp(a.accentTextTheme, b.accentTextTheme, t), @@ -703,6 +715,7 @@ class ThemeData extends Diagnosticable { (otherData.unselectedWidgetColor == unselectedWidgetColor) && (otherData.disabledColor == disabledColor) && (otherData.buttonColor == buttonColor) && + (otherData.toggleableActiveColor == toggleableActiveColor) && (otherData.buttonTheme == buttonTheme) && (otherData.secondaryHeaderColor == secondaryHeaderColor) && (otherData.textSelectionColor == textSelectionColor) && @@ -749,6 +762,7 @@ class ThemeData extends Diagnosticable { textSelectionColor, textSelectionHandleColor, hashValues( // Too many values. + toggleableActiveColor, backgroundColor, accentColor, accentColorBrightness, @@ -799,6 +813,7 @@ class ThemeData extends Diagnosticable { properties.add(new DiagnosticsProperty('indicatorColor', indicatorColor, defaultValue: defaultData.indicatorColor)); properties.add(new DiagnosticsProperty('hintColor', hintColor, defaultValue: defaultData.hintColor)); properties.add(new DiagnosticsProperty('errorColor', errorColor, defaultValue: defaultData.errorColor)); + properties.add(new DiagnosticsProperty('toggleableActiveColor', toggleableActiveColor, defaultValue: defaultData.toggleableActiveColor)); properties.add(new DiagnosticsProperty('buttonTheme', buttonTheme)); properties.add(new DiagnosticsProperty('textTheme', textTheme)); properties.add(new DiagnosticsProperty('primaryTextTheme', primaryTextTheme));