Make your chat bubbles colorful

Preface

In chat applications , Usually use bubbles as the background color of chat content , For example, the chat background of wechat , People send white bubbles , My hair is green bubble .

The above one is common , Let's play some interesting , Let the chat bubble be a gradient . Many people may think that gradient is very simple , to Container To a decoration Or use DecoratedBox, Just use the gradient fill color , For example, the following effect ：

This feeling is too ugly , In this article, let's have an advanced —— The bubble color of the whole chat window is gradient , And it changes as you scroll ！ Let's take a look at the effect of implementation , There are two effects ：

• The chat bubble background color of the entire window is continuously gradient , Instead of repeating gradients for each bubble .
• When rolling , The background color of the bubble will change with the position of the scroll .

Code implementation

Use Co