手把手教你实现一个流动的渐变色边框

前言

记得在介绍 motion_toast 一篇的时候，开篇有一张动图，边框是渐变色而且感觉是流动的。这个动效挺有趣的，当时也有人问怎么实现，经过上一篇《让你的聊天气泡丰富多彩！》后，有了实现思路了。

实现思路

首先要实现但是渐变色边框，这个其实可以参考上一篇的CustomPaint 的渐变填充实现。绘制一个矩形边框，然后让渐变色的区域填充到矩形区域内就可以了。

void paint(Canvas canvas, Size size) {
  final rectWidth = 300.0, rectHeight = 100.0;
  Rect rect = Offset(
          size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) &
      Size(rectWidth, rectHeight);
  final paint = Paint()
    ..shader = LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: 
1
2
3
4
5
6
7
8
9