flutter - 实现渐变动画矩形边框

最近碰到一个需求需要实现一个矩形，矩形边框为渐变色，并且要求渐变色不断滚动向前，如下图所示

主要思路参考自这篇文章 另外还有来自 chatgpt 的回答，实现效果如上图所示效果

具体实现思路

1. 用 CustomPainter 实现一个渐变矩形边框

     void paint(Canvas canvas, Size size) {
       // 创建一个矩形区域
       final rect = Rect.fromLTWH(0, 0, 96, 38);
       final paint = Paint()
         ..shader = LinearGradient(
           // 渐变色值
           colors: const [Color.yellow, Colors.green],
           // 此处是实现动画的关键 => 动态传入角度来实现动画
           transform: GradientRotation(animation * 2 * pi),
           // 创建一个线性渐变着色器对象并将其应用于矩形形状的填充
         ).createShader(rect)
         ..style = PaintingStyle.stroke
         // 边框宽度为 2 注意边框宽度是在矩形外边，所以这个矩形的宽高就变为 100*42
         ..strokeWidth = 2; 
       
       // 实现圆角矩形
       final rRect = RRect.fromRectAndRadius(rect, const Radius.circular(8));
       canvas.drawRRect(rRect, paint);
       
       // 另外也可实现直角矩形/圆形
       // 画直角矩形 
       canvas.drawRect(rect, paint);
       // 画圆形 参数：圆心坐标, 半径
       canvas.drawCircle(Offset(48, 20), 50, paint);
     }
   

2. 动画实现借助显式动画 AnimationController 和 AnimationBuilder，具体写法看下方完整代码

完整代码

• 核心绘图代码

import 'dart:math';

import 'package:flutter/material.dart';

class GradientBound extends StatefulWidget {
  // 矩形 长、宽、边框宽度，其中长、宽已包含边框宽度
  final double width;
  final double height;
  final double border;
  final Widget child;
  const GradientBound({
    super.key,
    required this.width,
    required this.height,
    required this.border,
    required this.child,
  });

  @override
  State<GradientBound> createState() => _GradientBoundState();
}

class _GradientBoundState extends State<GradientBound>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );
    animation = Tween<double>(begin: 0, end: 1.0).animate(CurvedAnimation(
      parent: controller,
      curve: Curves.linear,
    ));

    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animation,
        builder: (BuildContext context, Widget? child) {
          return CustomPaint(
            // 创建 painter
            painter: GradientBoundPainter(
              colors: const [Color.yellow, Colors.green],
              animation: animation.value,
              width: widget.width,
              height: widget.height,
              border: widget.border,
            ),
            // child 内容铺满容器并居中
            child: Container(
              alignment: Alignment.center,
              width: widget.width,
              height: widget.height,
              color: Colors.transparent,
              child: widget.child,
            ),
          );
        });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

// 渐变边框核心绘图逻辑
class GradientBoundPainter extends CustomPainter {
  final List<Color> colors;
  final double animation;
  final double width;
  final double height;
  final double border;
  const GradientBoundPainter({
    Key? key,
    required this.colors,
    required this.animation,
    required this.width,
    required this.height,
    required this.border,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTWH(0, 0, width, height);
    final paint = Paint()
      ..shader = LinearGradient(
        colors: colors,
        transform: GradientRotation(animation * 2 * pi),
      ).createShader(rect)
      ..style = PaintingStyle.stroke
      ..strokeWidth = border;

    final rRect = RRect.fromRectAndRadius(rect, const Radius.circular(8));
    canvas.drawRRect(rRect, paint);
  }

  @override
  bool shouldRepaint(covariant GradientBoundPainter oldDelegate) {
    return oldDelegate.colors != colors || oldDelegate.animation != animation;
  }
}