Repository navigation
Implement the full set of Floating Action Button features in the Material spec #227
Description
Monday Oct 26, 2015 at 16:59 GMT
Originally opened as https://github.com/flutter/engine/issues/1785
- It comes in two sizes, regular and mini.
- It's always a hero.
- It heroates by growing and spinning in, and shrinking and spinning out.
- It heroates even when switching tabs, by disappearing then reappearing in the new location.
- It can transform into a toolbar.
- It can transform into a popup menu.
- It can fling out 2-6 extra actions.
- It can morph into a part of an application's structure (going down a z-level and merging with material already there, of the same colour, potentially morphing the existing text to make room)
- It can transform into a new page, though that page's exit animation is a slide out, not morphing back to the fab.
- it can be disabled
Activity
rrousselGit commentedon Apr 26, 2018
In one of the video example, there's a third size which is bigger than the both regular and mini :
https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsWm9PdVplYzZvNTg/components-buttons-fab-behavior-03-xhdpi-001.webm
rrousselGit commentedon Apr 26, 2018
@Hixie I think the "morph" related features should be extracted into another issue. As they are not specific to floating button.
For example, Floating Button's morph is based on the specs here
JulianBissekkou commentedon Nov 21, 2019
Any updates on this?
Levi-Lesches commentedon Jul 20, 2020
There is a package for this now:
flutter_speed_dial, and judging by the 97% popularity score, it seems to be used often. Maybe it can be merged into the default FAB?IMO this one's important. Currently, the docs say that we should avoid disabling the FAB, and if we do, we should change the color by ourselves, which can get messy with Theme-level and Widget-level color overrides. Also, in my experience, when changing the color the FAB still has its elevation (or some other property) such that the disabled color is not a "flat" grey, but rather a semi-transparent black.
Hixie commentedon Feb 4, 2021
#53502 covers the last item here, the rest is possible with packages like the animations package or built-in behaviours.
github-actions commentedon Aug 6, 2021
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 -vand a minimal reproduction of the issue.