Skip to content
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

Update Slider for Material 3 redesign #141842

Open
parlough opened this issue Jan 19, 2024 · 12 comments · May be fixed by #147783
Open

Update Slider for Material 3 redesign #141842

parlough opened this issue Jan 19, 2024 · 12 comments · May be fixed by #147783
Assignees
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@parlough
Copy link
Member

parlough commented Jan 19, 2024

M3 sliders have an updated look

image
image

Since this occurred after the primary Material 3 transition, this could potentially be an option that starts as defaulting to false, switches to true, and then is eventually removed. Or a new widget as they are significantly different.

Specification: https://m3.material.io/components/sliders/specs
December 2023 updates: https://m3.material.io/components/sliders/overview#79de9466-a59c-4236-9099-735e67a38e53

@parlough parlough changed the title Update slider for Material 3 redesign Update Slider for Material 3 redesign Jan 19, 2024
@danagbemava-nc danagbemava-nc added in triage Presently being triaged by the triage team c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. c: proposal A detailed proposal for a change to Flutter team-design Owned by Design Languages team and removed in triage Presently being triaged by the triage team labels Jan 19, 2024
@TahaTesser
Copy link
Member

cc: @HansMuller @Piinks
This seems like a good opportunity to resolve all the legacy issues mentioned in #125329 and create a separate new Slider widget with the redesign.

I'll be more than happy to take this when we decide to work on this.

@parlough
Copy link
Member Author

As always, you're our hero @TahaTesser! I think this change will be a bit controversial over the original slider due to its size, so decent configuration options are probably worthwhile. However, the new style defaults fit in a lot better with other new styles like the switches and it has a lot of accessibility wins, so I'm excited for this. Thanks 💙

@HansMuller
Copy link
Contributor

Creating a new component vs evolving the existing one is a tricky question; there are many pros and cons to consider. Either way, it's a big project. We'll need to think carefully about how (and when) to proceed.

@Piinks
Copy link
Contributor

Piinks commented Jan 19, 2024

In general, introducing new widgets instead of updating old ones is the most disruptive and breaking change for developers.

@parlough
Copy link
Member Author

parlough commented Jan 19, 2024

I have no particular preference, I was just enumerating some possibilities for discussion. Whatever is the standard for the framework and less disruptive for developers works for me :)

@TheLastFlame
Copy link

In general, introducing new widgets instead of updating old ones is the most disruptive and breaking change for developers.

Isn't it the other way around? After the old widget is updated, all projects using it will need to update the code to restore the desired results.

In the case of creating a new widget, nothing will break for anyone, they will only have the opportunity to use the new widget if they want.

@HansMuller HansMuller added P2 Important issues not at the top of the work list triaged-design Triaged by Design Languages team labels Jan 24, 2024
@benthillerkus
Copy link

Isn't it the other way around? After the old widget is updated, all projects using it will need to update the code to restore the desired results.

There isn't a way for the framework to differentiate between the users who want Material Design and those who use material.dart, because they need input components, but are actually shipping their own design system hacked on top of that.

For developers who want "native" Material Design like on Android, updating the existing slider would be better. The rest would prefer introducing a new widget, so that they don't need to update their hacks that make the Material widget match their design teams' Figma.

At the core of this is the unresolved "ship material as a seperate package" issue, which would make it much easier to stay on older versions of the package, while at the same time keeping the Flutter version fresh -- and the blankcanvas / shadcn projects that aim to provide actually neutral components that are ment to be customized.

@guidezpl
Copy link
Member

guidezpl commented Apr 2, 2024

We'll need to update at least:

  • thumb shape
  • slider track shape
  • indicator shape

I already created the thumb and slider track shapes for an internal prototype, which can serve whoever wants to implement this as a starting point. LMK and I'll send you code.

image

@TahaTesser
Copy link
Member

@guidezpl
Please feel free to send. I can continue the work.

@TahaTesser TahaTesser self-assigned this Apr 2, 2024
@TahaTesser
Copy link
Member

TahaTesser commented Apr 2, 2024

@guidezpl just sent me the code, I can take a look, add tests, docs, example and update Slider in a non-breaking way. Thanks!

@TahaTesser
Copy link
Member

I made a bunch of bug fixes and improvements to the thumb and track code provided by @guidezpl

Today I created the new value indicator shape to go with this update.

This is almost done, more tweaks and tests are needed, will file this next week.
When this land, these shapes will be optional. I'll include an example to explain how to get the new look.

Screenshot 2024-04-26 at 16 52 55

@TahaTesser TahaTesser linked a pull request May 3, 2024 that will close this issue
9 tasks
@ferraridamiano
Copy link

ferraridamiano commented May 11, 2024

Thank you @TahaTesser for implementing this cool redesign. In this new material redesign has been added also the "centered configuration"
image

Will your PR also add this feature or will it be added later? Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
Status: PR submitted
Status: No status
Development

Successfully merging a pull request may close this issue.

9 participants