Skip to content

Conversation

@TahaTesser
Copy link
Member

Fixes Update RangeSlider for Material 3 redesign

Description

This PR updates RangeSlider with year2023 flag which can be used to opt into the 2024 `RangeSlider design appearance.

Code Sample

expand to view the code sample
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;
            });
          },
        ),
      ],
    );
  }
}
Preview 1 Preview 2

Custom track gap and thumb size

Screenshot 2025-02-20 at 15 26 09 Screenshot 2025-02-20 at 15 27 19

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 20, 2025
@TahaTesser TahaTesser force-pushed the m3_range_slider_design branch 3 times, most recently from 0d2efdc to 04e0d7e Compare February 21, 2025 09:44
@TahaTesser TahaTesser marked this pull request as ready for review February 21, 2025 11:24
@TahaTesser TahaTesser requested review from QuncCccccc and removed request for matanlurey February 21, 2025 11:24
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for adding the new M3 style for RangeSlider! I just did the first round review and it looks really great!

if (_active && thumbWidth != null && pressedThumbWidth != null && trackGap != null) {
delta = thumbWidth - pressedThumbWidth;
if (thumbWidth > 0.0) {
thumbWidth = pressedThumbWidth;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When thumbWidth is > 0, thumbWidth equals to pressedThumbWidth, but is it possible that thumbWidth is <= 0?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question! The thumb shape actually renders the thumb with a non-negative size when passing a negative thumbWidth. For instance, passing -10 will render a thumb shape with a width of 10 pixels.

As a result, the thumbWidth > 0.0 condition actually ignores the pressed width. We don't need this condition since the thumb renders just fine with a negative width, and it should have a pressed width as well. I'll remove this condition.

@TahaTesser TahaTesser force-pushed the m3_range_slider_design branch from 04e0d7e to 3749d09 Compare March 19, 2025 13:12
@TahaTesser TahaTesser requested a review from QuncCccccc April 1, 2025 07:51
@dkwingsmt
Copy link
Contributor

@QuncCccccc Gentle nudge (from triage)

Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM once we fix the conflicts! Sorry for the late response!

@TahaTesser
Copy link
Member Author

LGTM once we fix the conflicts! Sorry for the late response!

Thanks! I'll resolve the conflicts.

@TahaTesser TahaTesser force-pushed the m3_range_slider_design branch from 3749d09 to 7dd9f49 Compare May 14, 2025 20:07
@TahaTesser
Copy link
Member Author

Resolved conflicts. Could you please take a last look? @QuncCccccc

@QuncCccccc QuncCccccc self-requested a review May 15, 2025 23:41
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM:)

@QuncCccccc QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label May 19, 2025
@auto-submit auto-submit bot added this pull request to the merge queue May 19, 2025
Merged via the queue into flutter:master with commit 559c314 May 19, 2025
151 checks passed
@flutter-dashboard flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label May 19, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 19, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 19, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 19, 2025
@TahaTesser TahaTesser deleted the m3_range_slider_design branch May 20, 2025 06:19
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
auto-submit bot pushed a commit to flutter/packages that referenced this pull request May 21, 2025
Roll Flutter from 9a78af5eb067 to 33cdd8ef31dc (60 revisions)

flutter/flutter@9a78af5...33cdd8e

2025-05-21 [email protected] Feat: Add persistentFooterDecoration for scaffold (flutter/flutter#167524)
2025-05-21 [email protected] Removed repeated entry in `CHANGELOG.md` (flutter/flutter#165273)
2025-05-21 [email protected] [native assets] Graduate to preview (flutter/flutter#169194)
2025-05-21 [email protected] [Impeller] disable gl ext render to texture on vivante. (flutter/flutter#169153)
2025-05-21 [email protected] fix(widget_inspector): add null check for flex factor property to prevent exception (flutter/flutter#167890)
2025-05-21 [email protected] Unpin leak_tracker. (flutter/flutter#169079)
2025-05-21 [email protected] runtime/dart: fuchsia::io::MODE_TYPE_FILE -> V_TYPE_FILE (flutter/flutter#168952)
2025-05-21 [email protected] Remove `isExplicitPackageDependenciesEnabled: true`, it is the default. (flutter/flutter#169156)
2025-05-21 [email protected] Roll pub packages (flutter/flutter#169181)
2025-05-20 [email protected] Fix the issue with Tooltip (flutter/flutter#168546)
2025-05-20 [email protected] [native assets] Roll dependencies (flutter/flutter#169073)
2025-05-20 [email protected] Add documentation for experimental branches, update artifacts. (flutter/flutter#169109)
2025-05-20 [email protected] [flutter_tool] Remove unused environment flags in JS compiler (flutter/flutter#169097)
2025-05-20 [email protected] Add support for hiding widget subtrees from the widget inspector (flutter/flutter#169007)
2025-05-20 [email protected] Roll Fuchsia GN SDK from jsZSHIOmQAs3URvWU... to _tkqOQZ2qB5CxDe57... (flutter/flutter#169113)
2025-05-20 [email protected] Skip running `Linux fuchsia_test` on non-master channel. (flutter/flutter#169106)
2025-05-19 [email protected] Roll Skia from c97451da059f to 13a299964c9f (61 revisions) (flutter/flutter#169099)
2025-05-19 [email protected] Shared element transition for predictive back (flutter/flutter#154718)
2025-05-19 [email protected] Fix DDC library bundle format test files to correctly pass flags (flutter/flutter#169095)
2025-05-19 [email protected] Clean up redundant new line in the GPUSurfaceGLSkia constructor initializer list (flutter/flutter#169031)
2025-05-19 [email protected] Fix keyboard_hot_restart_ios flakes (flutter/flutter#168518)
2025-05-19 [email protected] fix android studio lint about lambda argument (flutter/flutter#168901)
2025-05-19 [email protected] Fix typo in gpu_surface_gl_impeller.cc (flutter/flutter#168395)
2025-05-19 [email protected] Modernize system executable detection across components (flutter/flutter#169018)
2025-05-19 [email protected] Update documentation for `Size` and `Rect` classes (flutter/flutter#168031)
2025-05-19 [email protected] Update the `RangeSlider` widget to the 2024 Material Design appearance (flutter/flutter#163736)
2025-05-19 [email protected] Roll Packages from 58d4016 to af0b9a9 (5 revisions) (flutter/flutter#169075)
2025-05-19 [email protected] Only bundle assets and plugins from transitive closure of dependencies (flutter/flutter#160443)
2025-05-19 [email protected] Make FlutterGeneratedPluginSwiftPackage an Xcode root package (flutter/flutter#168789)
2025-05-19 [email protected] docs: Update deprecation message for Slider.year2023 (flutter/flutter#169053)
2025-05-18 [email protected] macOS: port ResizeSynchronizer to Swift (flutter/flutter#168959)
2025-05-17 [email protected] Roll Dart SDK from dc323ec0c1a3 to 7c40eba6bf77 (3 revisions) (flutter/flutter#169024)
2025-05-17 [email protected] [tool] Remove unused `reportNullSafety` getter (flutter/flutter#168484)
2025-05-17 [email protected] Add flag to skip bundling extension safe builds in frameworks for DDM (flutter/flutter#168955)
2025-05-16 [email protected] Fixes Navigator calls onPopInvokedWithResult when onPopPage return false (flutter/flutter#168567)
2025-05-16 [email protected] [hcpp/hc] Fix talkback for HC and HCPP Android platform views (flutter/flutter#168939)
2025-05-16 [email protected] [Impeller] separate immutable sampler descriptors. (flutter/flutter#169011)
2025-05-16 [email protected] TextField magnifier stuck on long press cancel (flutter/flutter#167881)
2025-05-16 [email protected] Fix Chip delete button semantic bounds (flutter/flutter#168310)
2025-05-16 [email protected] Roll Fuchsia Linux SDK from Jj-iDG5uPOsFgY2_H... to XtPp9bBW49iDJ0wbA... (flutter/flutter#169009)
2025-05-16 [email protected] [ Widget Preview ] Refactor `@Preview()` detection and code generation (flutter/flutter#168307)
2025-05-16 [email protected] Roll Packages from 2dff621 to 58d4016 (2 revisions) (flutter/flutter#168999)
2025-05-16 [email protected] Remove `unittests` from `windows_host_engine` GN targets. (flutter/flutter#168991)
2025-05-16 [email protected] Fix bug with debugging support code not getting injected on edge devices (flutter/flutter#168073)
2025-05-16 [email protected] Roll Dart SDK from a1db62a5dd14 to dc323ec0c1a3 (4 revisions) (flutter/flutter#168989)
2025-05-16 [email protected] Resolve Cupertino textstyle in MaterialBasedCupertinoThemeData (flutter/flutter#167597)
...
FMorschel pushed a commit to FMorschel/packages that referenced this pull request Jun 9, 2025
…r#9305)

Roll Flutter from 9a78af5eb067 to 33cdd8ef31dc (60 revisions)

flutter/flutter@9a78af5...33cdd8e

2025-05-21 [email protected] Feat: Add persistentFooterDecoration for scaffold (flutter/flutter#167524)
2025-05-21 [email protected] Removed repeated entry in `CHANGELOG.md` (flutter/flutter#165273)
2025-05-21 [email protected] [native assets] Graduate to preview (flutter/flutter#169194)
2025-05-21 [email protected] [Impeller] disable gl ext render to texture on vivante. (flutter/flutter#169153)
2025-05-21 [email protected] fix(widget_inspector): add null check for flex factor property to prevent exception (flutter/flutter#167890)
2025-05-21 [email protected] Unpin leak_tracker. (flutter/flutter#169079)
2025-05-21 [email protected] runtime/dart: fuchsia::io::MODE_TYPE_FILE -> V_TYPE_FILE (flutter/flutter#168952)
2025-05-21 [email protected] Remove `isExplicitPackageDependenciesEnabled: true`, it is the default. (flutter/flutter#169156)
2025-05-21 [email protected] Roll pub packages (flutter/flutter#169181)
2025-05-20 [email protected] Fix the issue with Tooltip (flutter/flutter#168546)
2025-05-20 [email protected] [native assets] Roll dependencies (flutter/flutter#169073)
2025-05-20 [email protected] Add documentation for experimental branches, update artifacts. (flutter/flutter#169109)
2025-05-20 [email protected] [flutter_tool] Remove unused environment flags in JS compiler (flutter/flutter#169097)
2025-05-20 [email protected] Add support for hiding widget subtrees from the widget inspector (flutter/flutter#169007)
2025-05-20 [email protected] Roll Fuchsia GN SDK from jsZSHIOmQAs3URvWU... to _tkqOQZ2qB5CxDe57... (flutter/flutter#169113)
2025-05-20 [email protected] Skip running `Linux fuchsia_test` on non-master channel. (flutter/flutter#169106)
2025-05-19 [email protected] Roll Skia from c97451da059f to 13a299964c9f (61 revisions) (flutter/flutter#169099)
2025-05-19 [email protected] Shared element transition for predictive back (flutter/flutter#154718)
2025-05-19 [email protected] Fix DDC library bundle format test files to correctly pass flags (flutter/flutter#169095)
2025-05-19 [email protected] Clean up redundant new line in the GPUSurfaceGLSkia constructor initializer list (flutter/flutter#169031)
2025-05-19 [email protected] Fix keyboard_hot_restart_ios flakes (flutter/flutter#168518)
2025-05-19 [email protected] fix android studio lint about lambda argument (flutter/flutter#168901)
2025-05-19 [email protected] Fix typo in gpu_surface_gl_impeller.cc (flutter/flutter#168395)
2025-05-19 [email protected] Modernize system executable detection across components (flutter/flutter#169018)
2025-05-19 [email protected] Update documentation for `Size` and `Rect` classes (flutter/flutter#168031)
2025-05-19 [email protected] Update the `RangeSlider` widget to the 2024 Material Design appearance (flutter/flutter#163736)
2025-05-19 [email protected] Roll Packages from 58d4016 to af0b9a9 (5 revisions) (flutter/flutter#169075)
2025-05-19 [email protected] Only bundle assets and plugins from transitive closure of dependencies (flutter/flutter#160443)
2025-05-19 [email protected] Make FlutterGeneratedPluginSwiftPackage an Xcode root package (flutter/flutter#168789)
2025-05-19 [email protected] docs: Update deprecation message for Slider.year2023 (flutter/flutter#169053)
2025-05-18 [email protected] macOS: port ResizeSynchronizer to Swift (flutter/flutter#168959)
2025-05-17 [email protected] Roll Dart SDK from dc323ec0c1a3 to 7c40eba6bf77 (3 revisions) (flutter/flutter#169024)
2025-05-17 [email protected] [tool] Remove unused `reportNullSafety` getter (flutter/flutter#168484)
2025-05-17 [email protected] Add flag to skip bundling extension safe builds in frameworks for DDM (flutter/flutter#168955)
2025-05-16 [email protected] Fixes Navigator calls onPopInvokedWithResult when onPopPage return false (flutter/flutter#168567)
2025-05-16 [email protected] [hcpp/hc] Fix talkback for HC and HCPP Android platform views (flutter/flutter#168939)
2025-05-16 [email protected] [Impeller] separate immutable sampler descriptors. (flutter/flutter#169011)
2025-05-16 [email protected] TextField magnifier stuck on long press cancel (flutter/flutter#167881)
2025-05-16 [email protected] Fix Chip delete button semantic bounds (flutter/flutter#168310)
2025-05-16 [email protected] Roll Fuchsia Linux SDK from Jj-iDG5uPOsFgY2_H... to XtPp9bBW49iDJ0wbA... (flutter/flutter#169009)
2025-05-16 [email protected] [ Widget Preview ] Refactor `@Preview()` detection and code generation (flutter/flutter#168307)
2025-05-16 [email protected] Roll Packages from 2dff621 to 58d4016 (2 revisions) (flutter/flutter#168999)
2025-05-16 [email protected] Remove `unittests` from `windows_host_engine` GN targets. (flutter/flutter#168991)
2025-05-16 [email protected] Fix bug with debugging support code not getting injected on edge devices (flutter/flutter#168073)
2025-05-16 [email protected] Roll Dart SDK from a1db62a5dd14 to dc323ec0c1a3 (4 revisions) (flutter/flutter#168989)
2025-05-16 [email protected] Resolve Cupertino textstyle in MaterialBasedCupertinoThemeData (flutter/flutter#167597)
...
Ortes pushed a commit to Ortes/packages that referenced this pull request Jun 25, 2025
…r#9305)

Roll Flutter from 9a78af5eb067 to 33cdd8ef31dc (60 revisions)

flutter/flutter@9a78af5...33cdd8e

2025-05-21 [email protected] Feat: Add persistentFooterDecoration for scaffold (flutter/flutter#167524)
2025-05-21 [email protected] Removed repeated entry in `CHANGELOG.md` (flutter/flutter#165273)
2025-05-21 [email protected] [native assets] Graduate to preview (flutter/flutter#169194)
2025-05-21 [email protected] [Impeller] disable gl ext render to texture on vivante. (flutter/flutter#169153)
2025-05-21 [email protected] fix(widget_inspector): add null check for flex factor property to prevent exception (flutter/flutter#167890)
2025-05-21 [email protected] Unpin leak_tracker. (flutter/flutter#169079)
2025-05-21 [email protected] runtime/dart: fuchsia::io::MODE_TYPE_FILE -> V_TYPE_FILE (flutter/flutter#168952)
2025-05-21 [email protected] Remove `isExplicitPackageDependenciesEnabled: true`, it is the default. (flutter/flutter#169156)
2025-05-21 [email protected] Roll pub packages (flutter/flutter#169181)
2025-05-20 [email protected] Fix the issue with Tooltip (flutter/flutter#168546)
2025-05-20 [email protected] [native assets] Roll dependencies (flutter/flutter#169073)
2025-05-20 [email protected] Add documentation for experimental branches, update artifacts. (flutter/flutter#169109)
2025-05-20 [email protected] [flutter_tool] Remove unused environment flags in JS compiler (flutter/flutter#169097)
2025-05-20 [email protected] Add support for hiding widget subtrees from the widget inspector (flutter/flutter#169007)
2025-05-20 [email protected] Roll Fuchsia GN SDK from jsZSHIOmQAs3URvWU... to _tkqOQZ2qB5CxDe57... (flutter/flutter#169113)
2025-05-20 [email protected] Skip running `Linux fuchsia_test` on non-master channel. (flutter/flutter#169106)
2025-05-19 [email protected] Roll Skia from c97451da059f to 13a299964c9f (61 revisions) (flutter/flutter#169099)
2025-05-19 [email protected] Shared element transition for predictive back (flutter/flutter#154718)
2025-05-19 [email protected] Fix DDC library bundle format test files to correctly pass flags (flutter/flutter#169095)
2025-05-19 [email protected] Clean up redundant new line in the GPUSurfaceGLSkia constructor initializer list (flutter/flutter#169031)
2025-05-19 [email protected] Fix keyboard_hot_restart_ios flakes (flutter/flutter#168518)
2025-05-19 [email protected] fix android studio lint about lambda argument (flutter/flutter#168901)
2025-05-19 [email protected] Fix typo in gpu_surface_gl_impeller.cc (flutter/flutter#168395)
2025-05-19 [email protected] Modernize system executable detection across components (flutter/flutter#169018)
2025-05-19 [email protected] Update documentation for `Size` and `Rect` classes (flutter/flutter#168031)
2025-05-19 [email protected] Update the `RangeSlider` widget to the 2024 Material Design appearance (flutter/flutter#163736)
2025-05-19 [email protected] Roll Packages from 58d4016 to af0b9a9 (5 revisions) (flutter/flutter#169075)
2025-05-19 [email protected] Only bundle assets and plugins from transitive closure of dependencies (flutter/flutter#160443)
2025-05-19 [email protected] Make FlutterGeneratedPluginSwiftPackage an Xcode root package (flutter/flutter#168789)
2025-05-19 [email protected] docs: Update deprecation message for Slider.year2023 (flutter/flutter#169053)
2025-05-18 [email protected] macOS: port ResizeSynchronizer to Swift (flutter/flutter#168959)
2025-05-17 [email protected] Roll Dart SDK from dc323ec0c1a3 to 7c40eba6bf77 (3 revisions) (flutter/flutter#169024)
2025-05-17 [email protected] [tool] Remove unused `reportNullSafety` getter (flutter/flutter#168484)
2025-05-17 [email protected] Add flag to skip bundling extension safe builds in frameworks for DDM (flutter/flutter#168955)
2025-05-16 [email protected] Fixes Navigator calls onPopInvokedWithResult when onPopPage return false (flutter/flutter#168567)
2025-05-16 [email protected] [hcpp/hc] Fix talkback for HC and HCPP Android platform views (flutter/flutter#168939)
2025-05-16 [email protected] [Impeller] separate immutable sampler descriptors. (flutter/flutter#169011)
2025-05-16 [email protected] TextField magnifier stuck on long press cancel (flutter/flutter#167881)
2025-05-16 [email protected] Fix Chip delete button semantic bounds (flutter/flutter#168310)
2025-05-16 [email protected] Roll Fuchsia Linux SDK from Jj-iDG5uPOsFgY2_H... to XtPp9bBW49iDJ0wbA... (flutter/flutter#169009)
2025-05-16 [email protected] [ Widget Preview ] Refactor `@Preview()` detection and code generation (flutter/flutter#168307)
2025-05-16 [email protected] Roll Packages from 2dff621 to 58d4016 (2 revisions) (flutter/flutter#168999)
2025-05-16 [email protected] Remove `unittests` from `windows_host_engine` GN targets. (flutter/flutter#168991)
2025-05-16 [email protected] Fix bug with debugging support code not getting injected on edge devices (flutter/flutter#168073)
2025-05-16 [email protected] Roll Dart SDK from a1db62a5dd14 to dc323ec0c1a3 (4 revisions) (flutter/flutter#168989)
2025-05-16 [email protected] Resolve Cupertino textstyle in MaterialBasedCupertinoThemeData (flutter/flutter#167597)
...
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update RangeSlider for Material 3 redesign

3 participants