Create an expandable FAB

Drag a UI element

Create gradient chat bubbles

Cookbook

Effects

Create gradient chat bubbles

Understand the challenge

Replace original background widget

Create a custom painter

Provide access to scrolling information

Paint a full-screen bubble gradient

Recap

Traditional chat apps display messages in chat bubbles
with solid color backgrounds. Modern chat apps display
chat bubbles with gradients that are based 
on the bubbles’ position on the screen.
In this recipe, you’ll modernize the chat UI by implementing
gradient backgrounds for the chat bubbles.

The following animation shows the app’s behavior:

Understand the challenge