flutter_flutter/dev/tools/gen_defaults/lib/range_slider_template.dart
Taha Tesser 559c314ba3
Update the RangeSlider widget to the 2024 Material Design appearance (#163736)
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
2025-05-19 17:10:12 +00:00

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")};
}
''';
}