Create a typing indicator

Create gradient chat bubbles

Create an expandable FAB

Cookbook

Effects

Create an expandable FAB

Create an ExpandableFab widget

FAB cross-fade

Create an ActionButton widget

Expand and collapse the action buttons

Interactive example

A Floating Action Button (FAB) is a round button that
floats near the bottom right of a content area.
This button represents the primary action for the
corresponding content, but sometimes, there is no primary action.
Instead, there are a few critical actions that the user might take.
In this case, you could create an expandable FAB like the one shown
in the following figure. When pressed, this expandable FAB spawns
multiple, other action buttons. Each button corresponds to one of
those critical actions.

The following animation shows the app’s behavior: