Material 3

[yegor-pelykh]

Hi! Is it possible to make this control look like Material 3 FAB if that "Material 3" mode is used in the application?

Just for information: The "Material 3" theme mode can be set using the useMaterial3 property of the ThemeData class when setting it as a theme in the MaterialApp widget.

In fact, I have already tried this "Material 3" mode in my app with a SpeedDial. This control already looks pretty good when opened:

But the main FAB button still looks wrong, which looks quite inappropriate.

Could you fix this button with some styling, please?

For reference, the documentation for Material 3 FAB: https://m3.material.io/components/floating-action-button

[nvi9]

You can specify the shape to override the currently default StadiumBorder, this way it looks similar to M3 FAB:

SpeedDial(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  ...
)

[yegor-pelykh]

Yes, I can specify this shape, but in fact, I am now noticed that this is not enough to match Material 3. Both in part of the main fab, and in part of speed-dial children. Could you please do a full inspection of the controls to match Material 3?

For the reference: https://m3.material.io/components/floating-action-button/specs Section "Small FAB layout".

[nizioleque]

Hi, after some tweaking I found the configuration that matches the M3 spec :)

Here is some example code

SpeedDial(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(16)),
  ),
  spacing: 16,
  childMargin: EdgeInsets.zero,
  childPadding: const EdgeInsets.all(8.0),
  children: [
    SpeedDialChild(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    ),
    SpeedDialChild(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    ),
  ]
)

and here is the result

and a comparison