Flutter如何实现圆形进度条的填充

在Flutter中如何实现一个圆形进度条的填充效果？我想让进度条根据数据动态变化，类似于下载进度或任务完成百分比的效果。目前尝试了使用CustomPaint绘制，但不太清楚如何实现平滑的填充动画以及如何控制填充比例。有没有更简单的方法或者现成的组件可以实现这个功能？最好能提供具体的代码示例或实现思路。

2 回复

使用CustomPaint绘制圆形进度条，通过Canvas.drawArc方法绘制圆弧，结合动画控制填充进度。可设置起始角度、扫过角度和颜色等属性实现动态填充效果。

更多关于Flutter如何实现圆形进度条的填充的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过自定义CustomPainter绘制圆形进度条，或使用CircularProgressIndicator自定义样式实现填充效果。以下是两种方法：

1. 使用CustomPainter（推荐，灵活控制）

import 'package:flutter/material.dart';

class CircularProgressPainter extends CustomPainter {
  final double progress; // 进度值 0.0 ~ 1.0
  final Color backgroundColor;
  final Color progressColor;
  final double strokeWidth;

  CircularProgressPainter({
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.strokeWidth = 10.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = backgroundColor
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    // 绘制背景圆
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 2,
      paint,
    );

    // 绘制进度圆弧
    final progressPaint = Paint()
      ..color = progressColor
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    canvas.drawArc(
      Rect.fromCircle(
        center: Offset(size.width / 2, size.height / 2),
        radius: size.width / 2,
      ),
      -pi / 2, // 从顶部开始
      2 * pi * progress, // 进度弧度
      false,
      progressPaint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

// 使用示例
CustomPaint(
  size: Size(100, 100),
  painter: CircularProgressPainter(progress: 0.7),
)

2. 使用CircularProgressIndicator（简单场景）

CircularProgressIndicator(
  value: 0.7, // 进度值
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  strokeWidth: 8,
)

关键参数说明：

  • progress：进度值（0.0~1.0）
  • strokeWidth：线条粗细
  • strokeCap：线帽样式（圆形/方形）
  • 起始角度：通过drawArc的起始角度参数控制（-π/2表示从顶部开始）

选择方案：

  • 需要动画效果时推荐使用TweenAnimationBuilder包裹
  • 简单进度展示直接用CircularProgressIndicator
  • 需要完全自定义样式时使用CustomPainter
回到顶部