mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Fixes [Update `RangeSlider` for Material 3 redesign](https://github.com/flutter/flutter/issues/162505) ### Description This PR updates `RangeSlider` with `year2023` flag which can be used to opt into the 2024 `RangeSlider design appearance. ### Code Sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const RangeSliderExampleApp()); class RangeSliderExampleApp extends StatelessWidget { const RangeSliderExampleApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( sliderTheme: const SliderThemeData( showValueIndicator: ShowValueIndicator.always, ), ), home: Scaffold( appBar: AppBar(title: const Text('RangeSlider Sample')), body: const RangeSliderExample(), ), ); } } class RangeSliderExample extends StatefulWidget { const RangeSliderExample({super.key}); @override State<RangeSliderExample> createState() => _RangeSliderExampleState(); } class _RangeSliderExampleState extends State<RangeSliderExample> { RangeValues _currentRange1Values = const RangeValues(20.0, 60.0); RangeValues _currentRange2Values = const RangeValues(30.0, 80.0); @override Widget build(BuildContext context) { return Column( spacing: 20.0, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RangeSlider( year2023: false, values: _currentRange1Values, max: 100, onChanged: (RangeValues values) { setState(() { _currentRange1Values = values; }); }, ), RangeSlider( year2023: false, values: _currentRange2Values, max: 100, divisions: 10, labels: RangeLabels( _currentRange2Values.start.round().toString(), _currentRange2Values.end.round().toString(), ), onChanged: (RangeValues values) { setState(() { _currentRange2Values = values; }); }, ), ], ); } } ``` </details> | Preview 1 | Preview 2 | | --------------- | --------------- | | <img src="https://github.com/user-attachments/assets/e14a1b04-4e32-4b37-b2f5-2d2001f53114"/> | <img src="https://github.com/user-attachments/assets/aad36529-d576-4ec7-b2e5-49c9387456be"/> | # Custom track gap and thumb size <img width="343" alt="Screenshot 2025-02-20 at 15 26 09" src="https://github.com/user-attachments/assets/06c09679-1df8-4380-b3e6-c4add8f0cc42" /> <img width="338" alt="Screenshot 2025-02-20 at 15 27 19" src="https://github.com/user-attachments/assets/6226c515-f96b-412a-b59e-cafd2fba0515" /> ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
116 lines
4.0 KiB
Dart
116 lines
4.0 KiB
Dart
// Copyright 2014 The Flutter 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 'template.dart';
|
|
|
|
class RangeSliderTemplate extends TokenTemplate {
|
|
const RangeSliderTemplate(
|
|
this.tokenGroup,
|
|
super.blockName,
|
|
super.fileName,
|
|
super.tokens, {
|
|
super.colorSchemePrefix = '_colors.',
|
|
});
|
|
|
|
final String tokenGroup;
|
|
|
|
@override
|
|
String generate() => '''
|
|
class _${blockName}DefaultsM3 extends SliderThemeData {
|
|
_${blockName}DefaultsM3(this.context)
|
|
: super(trackHeight: ${getToken('$tokenGroup.active.track.height')});
|
|
|
|
final BuildContext context;
|
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
|
|
|
@override
|
|
Color? get activeTrackColor => ${componentColor('$tokenGroup.active.track')};
|
|
|
|
@override
|
|
Color? get inactiveTrackColor => ${componentColor('$tokenGroup.inactive.track')};
|
|
|
|
@override
|
|
Color? get disabledActiveTrackColor => ${componentColor('$tokenGroup.disabled.active.track')};
|
|
|
|
@override
|
|
Color? get disabledInactiveTrackColor => ${componentColor('$tokenGroup.disabled.inactive.track')};
|
|
|
|
@override
|
|
Color? get activeTickMarkColor => ${componentColor('$tokenGroup.active.stop-indicator.container')};
|
|
|
|
@override
|
|
Color? get inactiveTickMarkColor => ${componentColor('$tokenGroup.inactive.stop-indicator.container')};
|
|
|
|
@override
|
|
Color? get disabledActiveTickMarkColor => ${componentColor('$tokenGroup.disabled.active.stop-indicator.container')};
|
|
|
|
@override
|
|
Color? get disabledInactiveTickMarkColor => ${componentColor('$tokenGroup.disabled.inactive.stop-indicator.container')};
|
|
|
|
@override
|
|
Color? get thumbColor => ${componentColor('$tokenGroup.handle')};
|
|
|
|
@override
|
|
Color? get overlappingShapeStrokeColor => _colors.surface;
|
|
|
|
@override
|
|
Color? get disabledThumbColor => ${componentColor('$tokenGroup.disabled.handle')};
|
|
|
|
@override
|
|
Color? get overlayColor => _colors.primary.withOpacity(0.12);
|
|
|
|
@override
|
|
TextStyle? get valueIndicatorTextStyle => ${textStyle('$tokenGroup.value-indicator.label.label-text')}!.copyWith(
|
|
color: ${componentColor('$tokenGroup.value-indicator.label.label-text')},
|
|
);
|
|
|
|
@override
|
|
Color? get valueIndicatorColor => ${componentColor('$tokenGroup.value-indicator.container')};
|
|
|
|
@override
|
|
RangeSliderTrackShape? get rangeTrackShape => const GappedRangeSliderTrackShape();
|
|
|
|
@override
|
|
RangeSliderTickMarkShape? get rangeTickMarkShape => const RoundRangeSliderTickMarkShape(tickMarkRadius: ${getToken("$tokenGroup.stop-indicator.size")} / 2);
|
|
|
|
@override
|
|
RangeSliderThumbShape? get rangeThumbShape => const HandleRangeSliderThumbShape();
|
|
|
|
@override
|
|
SliderComponentShape? get overlayShape => const RoundSliderOverlayShape();
|
|
|
|
@override
|
|
RangeSliderValueIndicatorShape? get rangeValueIndicatorShape => const RoundedRectRangeSliderValueIndicatorShape();
|
|
|
|
@override
|
|
ShowValueIndicator? get showValueIndicator => ShowValueIndicator.onlyForDiscrete;
|
|
|
|
@override
|
|
double? get minThumbSeparation => 0;
|
|
|
|
@override
|
|
MaterialStateProperty<Size?>? get thumbSize {
|
|
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
|
|
if (states.contains(MaterialState.disabled)) {
|
|
return const Size(${getToken("$tokenGroup.disabled.handle.width")}, ${getToken("$tokenGroup.handle.height")});
|
|
}
|
|
if (states.contains(MaterialState.hovered)) {
|
|
return const Size(${getToken("$tokenGroup.hover.handle.width")}, ${getToken("$tokenGroup.handle.height")});
|
|
}
|
|
if (states.contains(MaterialState.focused)) {
|
|
return const Size(${getToken("$tokenGroup.focus.handle.width")}, ${getToken("$tokenGroup.handle.height")});
|
|
}
|
|
if (states.contains(MaterialState.pressed)) {
|
|
return const Size(${getToken("$tokenGroup.pressed.handle.width")}, ${getToken("$tokenGroup.handle.height")});
|
|
}
|
|
return const Size(${getToken("$tokenGroup.handle.width")}, ${getToken("$tokenGroup.handle.height")});
|
|
});
|
|
}
|
|
|
|
@override
|
|
double? get trackGap => ${getToken("$tokenGroup.active.handle.padding")};
|
|
}
|
|
''';
|
|
}
|