-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Introduce new Slider shapes
#147783
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Introduce new Slider shapes
#147783
Conversation
3fc68e1 to
dc1178f
Compare
dc1178f to
b1710e7
Compare
guidezpl
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work, just a general comment, I think we should make it easier to use the new shapes, since they will become the new default. Rather than manually specifying them, developers could flip a flag on ThemeData.
Interesting idea, tho this is only specific to |
|
Perhaps |
Added |
b1710e7 to
bb9d19d
Compare
|
@guidezpl |
bb9d19d to
732076d
Compare
732076d to
428389a
Compare
|
This PR #148789 removes the tokens for current M3 defaults so I will update the new shapes to use new the tokens and restore deleted token values as we plan to keep the current M3 shapes under the new flag. |
260bd1a to
745acf8
Compare
|
Updated the PR to use new tokens, restored the current M3 defaults, and made minor improvements. |
guidezpl
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice! looking for a second review
dab29c7 to
025ac29
Compare
|
Added an internal fix, Google testing will test again now. Please ping me if it's still not passing and I forget to check. |
Thanks so much, looks like it passes now! Waiting for the second review. |
Piinks
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This LGTM overall, it's just the use2024SliderShapes that gave me pause. Is this something we expect folks to migrate to? What is the difference between M2/M3/M3-2024?
Could we add some docs that explain this a bit more? And if we want folks to migrate, we should have a migration guide to let them know to start moving. :)
|
Pushed some doc updates.
Great questions! It's all in the visuals. Instead of listing all the shapes, I'll add some
Will write a migration for |
|
Are we wanting folks to migrate so we can have an updated default shape? Will all of the shapes be available (backwards compatible) for folks to use after the migration (and removal of the use2024Shapes flag)? |
|
Yes, all shapes are backwards compatible. I love this idea, however changing the defaults will give different slider appearance and it would be overridden with regular SliderTheme. Shall I remove the use2024SliderShapes flag? If we update defaults and they can customise the slider then we don't need this flag. |
|
Discussed this with Kate offline, moving forward with default update and migration guide. |
|
While updating the defaults, I ran into an existing bug with Update: #62567 Update: Visual progress #62567 (comment) |
|
#149594 fixes the issues to unblock this PR. |
…ounded corners (#149594) fixes [[Slider] Thumb's center doesn't align with division's center](#62567) fixes [Slider thumb doesn't respect round slider track shape](#149591) fixes [`RoundedRectSliderTrackShape` corners are not rendered correctly](#149589) (Verified these behaviors with Android components implementation) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @OverRide State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { double _value = 5.0; @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( sliderTheme: const SliderThemeData( trackHeight: 32, thumbColor: Colors.green, activeTrackColor: Colors.deepPurple, inactiveTrackColor: Colors.amber, ), ), home: Scaffold( body: Slider( value: _value, // divisions: 10, // ignore: avoid_redundant_argument_values min: 0, max: 10, onChanged: (double value) { setState(() { _value = value; }); }, ), ), ); } } ``` </details> ### Description This PR fixes several core `Sliders` issues which are apparent in #147783. As a result, fixing the these bugs will unblock it. ### 1. Fixes the thumb doesn't align with `Slider` divisions.   ### 2. Fixes `RoundedRectSliderTrackShape` corners are not rendered correctly.  ### 3. Fixes round track shape corners when the thumb is at the start or end of the round track shape.   
|
#149594 just landed which unblocks this PR. I'll update this PR and writing migration guide |
|
Closing this PR for a new clean PR which will also be included in the migration guide. |
fixes [Update `Slider` for Material 3 redesign](#141842) previous implementation #147783 ### Description This PR introduces new Material 3 Slider design. ### Slider Preview <img width="912" alt="Screenshot 2024-07-24 at 16 38 11" src="https://github.com/user-attachments/assets/9645ff6c-b72a-40aa-ae95-4f76994f8302"> <img width="912" alt="Screenshot 2024-07-24 at 16 38 24" src="https://github.com/user-attachments/assets/fbaed8bb-2717-43a9-9415-ea1365165d9a"> ### Value indicator Preview https://github.com/user-attachments/assets/45fa001c-de81-433a-a8e9-6c0d6a2335c0 ### New stop indicator https://github.com/user-attachments/assets/ad05621d-042d-4b17-9dbb-7f7b802a2593 ### Customized <img width="912" alt="Screenshot 2024-07-24 at 16 41 49" src="https://github.com/user-attachments/assets/2f279240-5af8-4bc8-9c65-a4b4ac718101"> ## 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
fixes Update
Sliderfor Material 3 redesignDescription
This PR adds new
SlidershapesBarSliderThumbShape,ExpressiveRoundedRectSliderTrackShape, andRoundedRectSliderValueIndicatorShapewhich are enabled when using the newSliderThemeData.use2024SliderShapesflag.Preview
New shapes when dragged
Record_2024-05-03-17-12-14.mp4
Record_2024-05-03-17-12-28.mp4
Stop indicator in the
RoundedRectSliderValueIndicatorShapetrack shapestop_indicator.mov
trackGapSizeset to0trackGapSize&barThumbSizePre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.