Flutter自定义矩形进度条实现详解

在Flutter应用开发中，进度条是一个常见的UI组件，用于展示任务的完成进度。本文将详细介绍如何实现一个支持动画效果的自定义矩形进度条。

功能特点

• 支持圆角矩形外观
• 平滑的动画过渡效果
• 可自定义渐变色
• 可配置边框宽度和颜色
• 支持进度更新动画

实现原理

该进度条的实现主要基于Flutter的CustomPaint和CustomPainter，通过绘制路径来实现圆角矩形的进度效果。

1. 基础组件结构

首先，我们创建一个StatefulWidget来管理进度条的状态：

class RectangleProgressBar extends StatefulWidget {
  final double progress;
  final Size size;
  final double borderRadius;
  final Duration duration;

  const RectangleProgressBar({
    super.key,
    required this.progress,
    this.size = const Size(200, 20