Skip to content

F
Front-End
Unverified Commit 0545c63b authored by MH Johnson's avatar MH Johnson Committed by GitHub
Browse files
Options

Revert "[Material] Update slider and slider theme with new sizes, shapes, and... 

Revert "[Material] Update slider and slider theme with new sizes, shapes, and color mappings (#30390)" (#31339)

This reverts commit b1039f0f.

(This is a temporary revert while some of our customers deal with the breaking changes involved.)
parent 484f6e75
Expand all Show whitespace changes
Inline Side-by-side
Showing with 294 additions and 414 deletions
packages/flutter/lib/src/material/slider.dart
View file @ 0545c63b
...@@ -428,52 +428,27 @@ class _SliderState extends State<Slider> with TickerProviderStateMixin { ...@@ -428,52 +428,27 @@ class _SliderState extends State<Slider> with TickerProviderStateMixin {
return widget.max > widget.min ? (value - widget.min) / (widget.max - widget.min) : 0.0; return widget.max > widget.min ? (value - widget.min) / (widget.max - widget.min) : 0.0;
} }
static const double _defaultTrackHeight = 2;
static const SliderTrackShape _defaultTrackShape = RoundedRectSliderTrackShape();
static const SliderTickMarkShape _defaultTickMarkShape = RoundSliderTickMarkShape();
static const SliderComponentShape _defaultOverlayShape = RoundSliderOverlayShape();
static const SliderComponentShape _defaultThumbShape = RoundSliderThumbShape();
static const SliderComponentShape _defaultValueIndicatorShape = PaddleSliderValueIndicatorShape();
static const ShowValueIndicator _defaultShowValueIndicator = ShowValueIndicator.onlyForDiscrete;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
assert(debugCheckHasMaterial(context)); assert(debugCheckHasMaterial(context));
assert(debugCheckHasMediaQuery(context)); assert(debugCheckHasMediaQuery(context));
final ThemeData theme = Theme.of(context);
SliderThemeData sliderTheme = SliderTheme.of(context); SliderThemeData sliderTheme = SliderTheme.of(context);
// If the widget has active or inactive colors specified, then we plug them // If the widget has active or inactive colors specified, then we plug them
// in to the slider theme as best we can. If the developer wants more // in to the slider theme as best we can. If the developer wants more
// control than that, then they need to use a SliderTheme. The default // control than that, then they need to use a SliderTheme.
// colors come from the ThemeData.colorScheme. These colors, along with if (widget.activeColor != null || widget.inactiveColor != null) {
// the default shapes and text styles are aligned to the Material
// Guidelines.
sliderTheme = sliderTheme.copyWith( sliderTheme = sliderTheme.copyWith(
trackHeight: sliderTheme.trackHeight ?? _defaultTrackHeight, activeTrackColor: widget.activeColor,
activeTrackColor: widget.activeColor ?? sliderTheme.activeTrackColor ?? theme.colorScheme.primary, inactiveTrackColor: widget.inactiveColor,
inactiveTrackColor: widget.inactiveColor ?? sliderTheme.inactiveTrackColor ?? theme.colorScheme.primary.withOpacity(0.24), activeTickMarkColor: widget.inactiveColor,
disabledActiveTrackColor: sliderTheme.disabledActiveTrackColor ?? theme.colorScheme.onSurface.withOpacity(0.32), inactiveTickMarkColor: widget.activeColor,
disabledInactiveTrackColor: sliderTheme.disabledInactiveTrackColor ?? theme.colorScheme.onSurface.withOpacity(0.12), thumbColor: widget.activeColor,
activeTickMarkColor: widget.inactiveColor ?? sliderTheme.activeTickMarkColor ?? theme.colorScheme.onPrimary.withOpacity(0.54), valueIndicatorColor: widget.activeColor,
inactiveTickMarkColor: widget.activeColor ?? sliderTheme.inactiveTickMarkColor ?? theme.colorScheme.primary.withOpacity(0.54), overlayColor: widget.activeColor?.withAlpha(0x29),
disabledActiveTickMarkColor: sliderTheme.disabledActiveTickMarkColor ?? theme.colorScheme.onPrimary.withOpacity(0.12),
disabledInactiveTickMarkColor: sliderTheme.disabledInactiveTickMarkColor ?? theme.colorScheme.onSurface.withOpacity(0.12),
thumbColor: widget.activeColor ?? sliderTheme.thumbColor ?? theme.colorScheme.primary,
disabledThumbColor: sliderTheme.disabledThumbColor ?? theme.colorScheme.onSurface.withOpacity(0.38),
overlayColor: widget.activeColor?.withOpacity(0.12) ?? sliderTheme.overlayColor ?? theme.colorScheme.primary.withOpacity(0.12),
valueIndicatorColor: widget.activeColor ?? sliderTheme.valueIndicatorColor ?? theme.colorScheme.primary,
trackShape: sliderTheme.trackShape ?? _defaultTrackShape,
tickMarkShape: sliderTheme.tickMarkShape ?? _defaultTickMarkShape,
thumbShape: sliderTheme.thumbShape ?? _defaultThumbShape,
overlayShape: sliderTheme.overlayShape ?? _defaultOverlayShape,
valueIndicatorShape: sliderTheme.valueIndicatorShape ?? _defaultValueIndicatorShape,
showValueIndicator: sliderTheme.showValueIndicator ?? _defaultShowValueIndicator,
valueIndicatorTextStyle: sliderTheme.valueIndicatorTextStyle ?? theme.textTheme.body2.copyWith(
color: theme.colorScheme.onPrimary,
),
); );
}
return _SliderRenderObjectWidget( return _SliderRenderObjectWidget(
value: _unlerp(widget.value), value: _unlerp(widget.value),
...@@ -523,6 +498,7 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget { ...@@ -523,6 +498,7 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
divisions: divisions, divisions: divisions,
label: label, label: label,
sliderTheme: sliderTheme, sliderTheme: sliderTheme,
theme: Theme.of(context),
mediaQueryData: mediaQueryData, mediaQueryData: mediaQueryData,
onChanged: onChanged, onChanged: onChanged,
onChangeStart: onChangeStart, onChangeStart: onChangeStart,
...@@ -560,6 +536,7 @@ class _RenderSlider extends RenderBox { ...@@ -560,6 +536,7 @@ class _RenderSlider extends RenderBox {
int divisions, int divisions,
String label, String label,
SliderThemeData sliderTheme, SliderThemeData sliderTheme,
ThemeData theme,
MediaQueryData mediaQueryData, MediaQueryData mediaQueryData,
TargetPlatform platform, TargetPlatform platform,
ValueChanged<double> onChanged, ValueChanged<double> onChanged,
...@@ -577,6 +554,7 @@ class _RenderSlider extends RenderBox { ...@@ -577,6 +554,7 @@ class _RenderSlider extends RenderBox {
_value = value, _value = value,
_divisions = divisions, _divisions = divisions,
_sliderTheme = sliderTheme, _sliderTheme = sliderTheme,
_theme = theme,
_mediaQueryData = mediaQueryData, _mediaQueryData = mediaQueryData,
_onChanged = onChanged, _onChanged = onChanged,
_state = state, _state = state,
...@@ -1005,6 +983,7 @@ class _RenderSlider extends RenderBox { ...@@ -1005,6 +983,7 @@ class _RenderSlider extends RenderBox {
isEnabled: isInteractive, isEnabled: isInteractive,
); );
// TODO(closkmith): Move this to paint after the thumb.
if (!_overlayAnimation.isDismissed) { if (!_overlayAnimation.isDismissed) {
_sliderTheme.overlayShape.paint( _sliderTheme.overlayShape.paint(
context, context,
...@@ -1021,6 +1000,7 @@ class _RenderSlider extends RenderBox { ...@@ -1021,6 +1000,7 @@ class _RenderSlider extends RenderBox {
} }
if (isDiscrete) { if (isDiscrete) {
// TODO(clocksmith): Align tick mark centers to ends of track by not subtracting diameter from length.
final double tickMarkWidth = _sliderTheme.tickMarkShape.getPreferredSize( final double tickMarkWidth = _sliderTheme.tickMarkShape.getPreferredSize(
isEnabled: isInteractive, isEnabled: isInteractive,
sliderTheme: _sliderTheme, sliderTheme: _sliderTheme,
......
packages/flutter/lib/src/material/theme_data.dart
View file @ 0545c63b
...@@ -243,7 +243,12 @@ class ThemeData extends Diagnosticable { ...@@ -243,7 +243,12 @@ class ThemeData extends Diagnosticable {
highlightColor ??= isDark ? _kDarkThemeHighlightColor : _kLightThemeHighlightColor; highlightColor ??= isDark ? _kDarkThemeHighlightColor : _kLightThemeHighlightColor;
splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor; splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;
sliderTheme ??= const SliderThemeData(); sliderTheme ??= SliderThemeData.fromPrimaryColors(
primaryColor: primaryColor,
primaryColorLight: primaryColorLight,
primaryColorDark: primaryColorDark,
valueIndicatorTextStyle: accentTextTheme.body2,
);
tabBarTheme ??= const TabBarTheme(); tabBarTheme ??= const TabBarTheme();
appBarTheme ??= const AppBarTheme(); appBarTheme ??= const AppBarTheme();
bottomAppBarTheme ??= const BottomAppBarTheme(); bottomAppBarTheme ??= const BottomAppBarTheme();
......
packages/flutter/test/material/slider_test.dart
View file @ 0545c63b
...@@ -298,8 +298,8 @@ void main() { ...@@ -298,8 +298,8 @@ void main() {
); );
final List<Offset> expectedLog = <Offset>[ final List<Offset> expectedLog = <Offset>[
const Offset(24.0, 300.0), const Offset(16.0, 300.0),
const Offset(24.0, 300.0), const Offset(16.0, 300.0),
const Offset(400.0, 300.0), const Offset(400.0, 300.0),
]; ];
final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byKey(sliderKey))); final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byKey(sliderKey)));
...@@ -313,20 +313,20 @@ void main() { ...@@ -313,20 +313,20 @@ void main() {
await tester.pump(const Duration(milliseconds: 10)); await tester.pump(const Duration(milliseconds: 10));
expect(value, equals(0.0)); expect(value, equals(0.0));
expect(log.length, 5); expect(log.length, 5);
expect(log.last.dx, closeTo(386.6, 0.1)); expect(log.last.dx, closeTo(386.3, 0.1));
// With no more gesture or value changes, the thumb position should still // With no more gesture or value changes, the thumb position should still
// be redrawn in the animated position. // be redrawn in the animated position.
await tester.pump(); await tester.pump();
await tester.pump(const Duration(milliseconds: 10)); await tester.pump(const Duration(milliseconds: 10));
expect(value, equals(0.0)); expect(value, equals(0.0));
expect(log.length, 7); expect(log.length, 7);
expect(log.last.dx, closeTo(344.5, 0.1)); expect(log.last.dx, closeTo(343.3, 0.1));
// Final position. // Final position.
await tester.pump(const Duration(milliseconds: 80)); await tester.pump(const Duration(milliseconds: 80));
expectedLog.add(const Offset(24.0, 300.0)); expectedLog.add(const Offset(16.0, 300.0));
expect(value, equals(0.0)); expect(value, equals(0.0));
expect(log.length, 8); expect(log.length, 8);
expect(log.last.dx, closeTo(24.0, 0.1)); expect(log.last.dx, closeTo(16.0, 0.1));
await gesture.up(); await gesture.up();
}); });
...@@ -409,8 +409,8 @@ void main() { ...@@ -409,8 +409,8 @@ void main() {
); );
final List<Offset> expectedLog = <Offset>[ final List<Offset> expectedLog = <Offset>[
const Offset(24.0, 300.0), const Offset(16.0, 300.0),
const Offset(24.0, 300.0), const Offset(16.0, 300.0),
const Offset(400.0, 300.0), const Offset(400.0, 300.0),
]; ];
final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byKey(sliderKey))); final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byKey(sliderKey)));
...@@ -424,20 +424,20 @@ void main() { ...@@ -424,20 +424,20 @@ void main() {
await tester.pump(const Duration(milliseconds: 10)); await tester.pump(const Duration(milliseconds: 10));
expect(value, equals(0.0)); expect(value, equals(0.0));
expect(log.length, 5); expect(log.length, 5);
expect(log.last.dx, closeTo(386.6, 0.1)); expect(log.last.dx, closeTo(386.3, 0.1));
// With no more gesture or value changes, the thumb position should still // With no more gesture or value changes, the thumb position should still
// be redrawn in the animated position. // be redrawn in the animated position.
await tester.pump(); await tester.pump();
await tester.pump(const Duration(milliseconds: 10)); await tester.pump(const Duration(milliseconds: 10));
expect(value, equals(0.0)); expect(value, equals(0.0));
expect(log.length, 7); expect(log.length, 7);
expect(log.last.dx, closeTo(344.5, 0.1)); expect(log.last.dx, closeTo(343.3, 0.1));
// Final position. // Final position.
await tester.pump(const Duration(milliseconds: 80)); await tester.pump(const Duration(milliseconds: 80));
expectedLog.add(const Offset(24.0, 300.0)); expectedLog.add(const Offset(16.0, 300.0));
expect(value, equals(0.0)); expect(value, equals(0.0));
expect(log.length, 8); expect(log.length, 8);
expect(log.last.dx, closeTo(24.0, 0.1)); expect(log.last.dx, closeTo(16.0, 0.1));
await gesture.up(); await gesture.up();
}); });
...@@ -546,20 +546,6 @@ void main() { ...@@ -546,20 +546,6 @@ void main() {
final ThemeData theme = ThemeData( final ThemeData theme = ThemeData(
platform: TargetPlatform.android, platform: TargetPlatform.android,
primarySwatch: Colors.blue, primarySwatch: Colors.blue,
sliderTheme: const SliderThemeData(
disabledThumbColor: Color(0xff000001),
disabledActiveTickMarkColor: Color(0xff000002),
disabledActiveTrackColor: Color(0xff000003),
disabledInactiveTickMarkColor: Color(0xff000004),
disabledInactiveTrackColor: Color(0xff000005),
activeTrackColor: Color(0xff000006),
activeTickMarkColor: Color(0xff000007),
inactiveTrackColor: Color(0xff000008),
inactiveTickMarkColor: Color(0xff000009),
overlayColor: Color(0xff000010),
thumbColor: Color(0xff000011),
valueIndicatorColor: Color(0xff000012),
)
); );
final SliderThemeData sliderTheme = theme.sliderTheme; final SliderThemeData sliderTheme = theme.sliderTheme;
double value = 0.45; double value = 0.45;
...@@ -738,7 +724,7 @@ void main() { ...@@ -738,7 +724,7 @@ void main() {
paints paints
..rect(color: customColor1) // active track ..rect(color: customColor1) // active track
..rect(color: customColor2) // inactive track ..rect(color: customColor2) // inactive track
..circle(color: customColor1.withOpacity(0.12)) // overlay ..circle(color: customColor1.withAlpha(0x29)) // overlay
..circle(color: customColor2) // 1st tick mark ..circle(color: customColor2) // 1st tick mark
..circle(color: customColor2) // 2nd tick mark ..circle(color: customColor2) // 2nd tick mark
..circle(color: customColor2) // 3rd tick mark ..circle(color: customColor2) // 3rd tick mark
...@@ -872,7 +858,7 @@ void main() { ...@@ -872,7 +858,7 @@ void main() {
), ),
), ),
)); ));
expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 24.0, 600.0)); expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 16.0, 600.0));
await tester.pumpWidget(Directionality( await tester.pumpWidget(Directionality(
textDirection: TextDirection.ltr, textDirection: TextDirection.ltr,
...@@ -892,7 +878,7 @@ void main() { ...@@ -892,7 +878,7 @@ void main() {
), ),
), ),
)); ));
expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 24.0, 48.0)); expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 16.0, 32.0));
}); });
testWidgets('Slider respects textScaleFactor', (WidgetTester tester) async { testWidgets('Slider respects textScaleFactor', (WidgetTester tester) async {
...@@ -1091,12 +1077,12 @@ void main() { ...@@ -1091,12 +1077,12 @@ void main() {
expect( expect(
sliderBox, sliderBox,
paints paints
..circle(x: 25.0, y: 24.0, radius: 1.0) ..circle(x: 17.0, y: 16.0, radius: 1.0)
..circle(x: 212.5, y: 24.0, radius: 1.0) ..circle(x: 208.5, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 1.0) ..circle(x: 400.0, y: 16.0, radius: 1.0)
..circle(x: 587.5, y: 24.0, radius: 1.0) ..circle(x: 591.5, y: 16.0, radius: 1.0)
..circle(x: 775.0, y: 24.0, radius: 1.0) ..circle(x: 783.0, y: 16.0, radius: 1.0)
..circle(x: 24.0, y: 24.0, radius: 10.0), ..circle(x: 16.0, y: 16.0, radius: 6.0),
); );
gesture = await tester.startGesture(center); gesture = await tester.startGesture(center);
...@@ -1107,13 +1093,13 @@ void main() { ...@@ -1107,13 +1093,13 @@ void main() {
expect( expect(
sliderBox, sliderBox,
paints paints
..circle(x: 111.20703125, y: 24.0, radius: 5.687664985656738) ..circle(x: 105.0625, y: 16.0, radius: 3.791776657104492)
..circle(x: 25.0, y: 24.0, radius: 1.0) ..circle(x: 17.0, y: 16.0, radius: 1.0)
..circle(x: 212.5, y: 24.0, radius: 1.0) ..circle(x: 208.5, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 1.0) ..circle(x: 400.0, y: 16.0, radius: 1.0)
..circle(x: 587.5, y: 24.0, radius: 1.0) ..circle(x: 591.5, y: 16.0, radius: 1.0)
..circle(x: 775.0, y: 24.0, radius: 1.0) ..circle(x: 783.0, y: 16.0, radius: 1.0)
..circle(x: 111.20703125, y: 24.0, radius: 10.0), ..circle(x: 105.0625, y: 16.0, radius: 6.0),
); );
// Reparenting in the middle of an animation should do nothing. // Reparenting in the middle of an animation should do nothing.
...@@ -1127,13 +1113,13 @@ void main() { ...@@ -1127,13 +1113,13 @@ void main() {
expect( expect(
sliderBox, sliderBox,
paints paints
..circle(x: 190.0135726928711, y: 24.0, radius: 12.0) ..circle(x: 185.5457763671875, y: 16.0, radius: 8.0)
..circle(x: 25.0, y: 24.0, radius: 1.0) ..circle(x: 17.0, y: 16.0, radius: 1.0)
..circle(x: 212.5, y: 24.0, radius: 1.0) ..circle(x: 208.5, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 1.0) ..circle(x: 400.0, y: 16.0, radius: 1.0)
..circle(x: 587.5, y: 24.0, radius: 1.0) ..circle(x: 591.5, y: 16.0, radius: 1.0)
..circle(x: 775.0, y: 24.0, radius: 1.0) ..circle(x: 783.0, y: 16.0, radius: 1.0)
..circle(x: 190.0135726928711, y: 24.0, radius: 10.0), ..circle(x: 185.5457763671875, y: 16.0, radius: 6.0),
); );
// Wait for animations to finish. // Wait for animations to finish.
await tester.pumpAndSettle(); await tester.pumpAndSettle();
...@@ -1141,13 +1127,13 @@ void main() { ...@@ -1141,13 +1127,13 @@ void main() {
expect( expect(
sliderBox, sliderBox,
paints paints
..circle(x: 400.0, y: 24.0, radius: 24.0) ..circle(x: 400.0, y: 16.0, radius: 16.0)
..circle(x: 25.0, y: 24.0, radius: 1.0) ..circle(x: 17.0, y: 16.0, radius: 1.0)
..circle(x: 212.5, y: 24.0, radius: 1.0) ..circle(x: 208.5, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 1.0) ..circle(x: 400.0, y: 16.0, radius: 1.0)
..circle(x: 587.5, y: 24.0, radius: 1.0) ..circle(x: 591.5, y: 16.0, radius: 1.0)
..circle(x: 775.0, y: 24.0, radius: 1.0) ..circle(x: 783.0, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 10.0), ..circle(x: 400.0, y: 16.0, radius: 6.0),
); );
await gesture.up(); await gesture.up();
await tester.pumpAndSettle(); await tester.pumpAndSettle();
...@@ -1155,12 +1141,12 @@ void main() { ...@@ -1155,12 +1141,12 @@ void main() {
expect( expect(
sliderBox, sliderBox,
paints paints
..circle(x: 25.0, y: 24.0, radius: 1.0) ..circle(x: 17.0, y: 16.0, radius: 1.0)
..circle(x: 212.5, y: 24.0, radius: 1.0) ..circle(x: 208.5, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 1.0) ..circle(x: 400.0, y: 16.0, radius: 1.0)
..circle(x: 587.5, y: 24.0, radius: 1.0) ..circle(x: 591.5, y: 16.0, radius: 1.0)
..circle(x: 775.0, y: 24.0, radius: 1.0) ..circle(x: 783.0, y: 16.0, radius: 1.0)
..circle(x: 400.0, y: 24.0, radius: 10.0), ..circle(x: 400.0, y: 16.0, radius: 6.0),
); );
} }
......
packages/flutter/test/material/theme_data_test.dart
View file @ 0545c63b
...@@ -56,6 +56,16 @@ void main() { ...@@ -56,6 +56,16 @@ void main() {
expect(darkTheme.accentTextTheme.title.color, typography.white.title.color); expect(darkTheme.accentTextTheme.title.color, typography.white.title.color);
}); });
test('Default slider indicator style gets a default body2 if accentTextTheme.body2 is null', () {
const TextTheme noBody2TextTheme = TextTheme(body2: null);
final ThemeData lightTheme = ThemeData(brightness: Brightness.light, accentTextTheme: noBody2TextTheme);
final ThemeData darkTheme = ThemeData(brightness: Brightness.dark, accentTextTheme: noBody2TextTheme);
final Typography typography = Typography(platform: lightTheme.platform);
expect(lightTheme.sliderTheme.valueIndicatorTextStyle, equals(typography.white.body2));
expect(darkTheme.sliderTheme.valueIndicatorTextStyle, equals(typography.black.body2));
});
test('Default chip label style gets a default body2 if textTheme.body2 is null', () { test('Default chip label style gets a default body2 if textTheme.body2 is null', () {
const TextTheme noBody2TextTheme = TextTheme(body2: null); const TextTheme noBody2TextTheme = TextTheme(body2: null);
final ThemeData lightTheme = ThemeData(brightness: Brightness.light, textTheme: noBody2TextTheme); final ThemeData lightTheme = ThemeData(brightness: Brightness.light, textTheme: noBody2TextTheme);
......
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

HIAST - GitLab