The following animation shows the app’s behavior:

Create an ExpandableFab widget

Start by creating a new stateful widget called ExpandableFab.
This widget displays the primary FAB and coordinates the expansion
and collapse of the other action buttons. The widget takes
in parameters for whether or not the ExpandedFab begins in
the expanded position, what the maximum distance of each action button is,
and a list of children. You’ll use the list later to provide
the other action buttons.

FAB cross-fade

The ExpandableFab displays a blue edit button when collapsed
and a white close button when expanded. When expanding and collapsing,
these two buttons scale and fade between one another.

Implement the expand and collapse cross-fade between the two different FABs.

The open button sits on top of the close button within a Stack,
allowing for the visual appearance of a cross-fade as the top button
appears and disappears.