Update `Switch` to support Material 3

[darrenaustin]

As part of the Material 3 specification there are updates to the Switch's visuals:

We need to update the existing Switch class in the Flutter Material library to support this.

[guidezpl]

This should require #81564

[tmaihoff]

Is there an update on this? A timeplan?

[QuncCccccc]

Is there an update on this? A timeplan?

Hi! I'm working on it and will create a pr once it's ready. Thanks for asking!

[mavyfaby]

Is there an update on this? A timeplan?

Hi! I'm working on it and will create a pr once it's ready. Thanks for asking!

Is there any way that I can help with this?

[guidezpl]

Great work @QuncCccccc! However, I noticed the layout (thumb size) and motion isn't quite to spec

Expected	Actual

Do you plan on addressing this in a separate PR?

[MaxYablochkin]

@guidezpl

1. Will Flutter exactly repeat this behavior of the switch?

2. If we talk about this switch in Flutter, then when it reaches the middle, the circle begins to decrease in radius, and then returns to the radius, depending on where the switch goes. What about the difference regarding specification? Is Flutter trying to be different? https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fl1xillgu-00_Deck_Tap_Drag.mp4?alt=media&token=c7599d2c-0cbc-47b7-b58a-2a3f95e51c8c

[QuncCccccc]

@guidezpl

1. Will Flutter exactly repeat this behavior of the switch?
2. If we talk about this switch in Flutter, then when it reaches the middle, the circle begins to decrease in radius, and then returns to the radius, depending on where the switch goes. What about the difference regarding specification? Is Flutter trying to be different? https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fl1xillgu-00_Deck_Tap_Drag.mp4?alt=media&token=c7599d2c-0cbc-47b7-b58a-2a3f95e51c8c

Thanks for catching this! The decreasing radius in the middle comes from the implementation of Material 2, just raised an issue for this and will fix it soon. https://github.com/flutter/flutter/issues/112026

[MaxYablochkin]

@guidezpl

Flutter

Native Android

There are also a few visual inconsistencies, for example, when the switch is off and pressed at the same time, the switch does not repaint in dark gray, and the same applies to the on, pressed state, it does not repaint in the color of the shade, but remains just white. The switch does not animate smoothly when raised when held, and also, in my opinion, there is no accompanying InkRipple animation behind the switch.

[MaxYablochkin]

There is a difference between web on android and web on windows, and it is a little surprising where the second one shows the correct display of colors that I described above🤔.

[mavyfaby]

Is there a separate pull request for the additional changes?

[QuncCccccc]

Is there a separate pull request for the additional changes?

Yes, I will raise a pr for these changes soon.

[huage2580]

great work!

Will it be released in version 3.5.0？

[bernaferrari]

You need to check the beta that includes this commit, so I don't know. But it's very recent, so I would wait for an additional 2-4 months. I would bet the next next flutter stable.

[ArishSultan]

There is a sligh inconsistency in animation, if you drag the thumb halfway and then release the "pan" then instead of continuing animation from that drag position there is slight glitch which feels like the thumb starts animation from the start instead of the position where drag was release.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.