Create a staggered menu animation

Create an expandable FAB

Create a typing indicator

Cookbook

Effects

Create a typing indicator

Define the typing indicator widget

Make room for the typing indicator

Animate the speech bubbles

Animate the flashing circles

Interactive example

Modern chat apps display indicators when other users
are actively typing responses. These indicators help
prevent rapid and conflicting responses between you
and the other person. In this recipe, you build a
speech bubble typing indicator that animates in and out of view.

The following animation shows the app’s behavior:

Define the typing indicator widget