Update segmented buttons to support Material 3

[darrenaustin]

As part of the Material 3 specification there are updates to the Segmented Button visuals:

The Flutter Material library currently has a ToggleButtons class that we should either update to support Material 3 or build a new widget if they are not close enough in functionality.

[bernaferrari]

It would be nice if the API aligned with the Cupertino segmented control, it looks probably more similar than ToggleButtons.

[rydmike]

Probably better to build a new widget, can then also improve its API and features, plus name align it with the M3 name too.

ToggleButtons have some limitations, like does not implement VisualDensity and it is based on RawMaterialButton. Then add oddities like the border is drawn outside its content height/width constraints. It can be themed fairly close the SegmentedButtons look, but not quite.

[TahaTesser]

cc: @rydmike

Thanks for the feedback!

ToggleButtons have some limitations, like does not implement VisualDensity

This looks to be true.

and it is based on RawMaterialButton.

ToggleButtons no longer contain RawMaterialButton. (I've replaced it in #101760)

Then add oddities like the border is drawn outside its content height/width constraints. It can be themed fairly close the SegmentedButtons look, but not quite.

Investigating this.

[TahaTesser]

cc: @rydmike @darrenaustin @HansMuller

After reading Segmented buttons specs and some native Android testing.

• In terms of functionality, there is no change. The single and multi-select functionality exist in both M2 and M3 versions
  (there is a check to toggle between only single and only multi-select in the specs, we can easily introduce this toggle if needed)
• There is a new optional check icon to indicate the selected state.
• Layout height is a little taller.
• Slight default shape change and minor typography changes.

Aside from minor improvements stated in #103529 (comment) which are already required addressing in M2 ToggleButtons, there is no significant difference.

I will defer to other team members for the widget name update. (In my testing I noticed even Android API doesn't have an updated name for SegementedButtons, it simply refers to MaterialButtonToggleGroup with different style attributes for M2 and M3).

We also didn't introduce newly named widgets for regular buttons, for instance Filled or Filled Tonal, see Material 3 button types

[bernaferrari]

Yes, there is FilledButton now. #107382

[TahaTesser]

Yes, there is FilledButton now. #107382

Oh nice, didn't know. It makes sense it needed some styling to achieve the FilledButton appearance

but this is not the case for ToggleButtons, migration will be based on tokens and won't need any custom style to get SegmentedButtons appearance and functionality is the same.

[darrenaustin]

After looking more closely at this, I think we should create a new SegmentedButton API that combines the best of the ToggleButton and CupertinoSegmentedControl APIs. It would of course be driven by M3 tokens by default, but would hopefully be configurable enough to be able to pull off Cupertino styles with just theme data. I have already started work on this, so if you don't mind @TahaTesser, I will assign this to myself.

[rydmike]

Thanks @darrenaustin, I also think that is a good call. Looking forward to seeing the results! 👍🏻

[TahaTesser]

@darrenaustin It sounds good! Definitely a bigger project, thanks for taking this.

[github-actions]

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.