Flutter 自绘实例：圆形背景渐变进度条

封面图 • 2026-03-24 • Flutter

在 Flutter 中，你可以使用 `CustomPaint` 和 `Canvas` 来实现**圆形背景渐变进度条**。下面是一个完整的示例代码，展示如何创建一个带有渐变背景的圆形进度条。

---

## 🎯 功能说明

- 圆形进度条
- 背景为渐变色（比如从蓝色到绿色）
- 进度条部分为另一种颜色（比如红色）
- 可以动态更新进度（通过 `setState`）

---

## ✅ 示例代码

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 圆形渐变进度条')),
        body: Center(child: CircularGradientProgressBar()),
      ),
    );
  }
}

class CircularGradientProgressBar extends StatefulWidget {
  @override
  _CircularGradientProgressBarState createState() =>
      _CircularGradientProgressBarState();
}

class _CircularGradientProgressBarState extends State<CircularGradientProgressBar> {
  double _progress = 0.5; // 初始进度 50%

void _updateProgress(double newProgress) {
    setState(() {
      _progress = newProgress;
    });
  }

@override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: CustomPaint(
        painter: CircularProgressPainter(
          progress: _progress,
          backgroundColor: Colors.blue.withOpacity(0.3),
          foregroundColor: Colors.red,
          gradientColors: [Colors.blue, Colors.green],
        ),
      ),
    );
  }
}

class CircularProgressPainter extends CustomPainter {
  final double progress;
  final Color backgroundColor;
  final Color foregroundColor;
  final List<Color> gradientColors;

CircularProgressPainter({
    required this.progress,
    required this.backgroundColor,
    required this.foregroundColor,
    required this.gradientColors,
  });

@override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2 - 10;

// 绘制背景圆
    final backgroundPaint = Paint()
      ..color = backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

canvas.drawCircle(center, radius, backgroundPaint);

// 绘制渐变进度条
    final gradient = SweepGradient(
      colors: gradientColors,
      center: Alignment.center,
      startAngle: 0,
      endAngle: 2 * pi,
    );

final gradientPaint = Paint()
      ..shader = gradient.createShader(Rect.fromLTWH(0, 0, size.width, size.height))
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20
      ..strokeCap = StrokeCap.round;

// 计算绘制角度
    final angle = 2 * pi * progress;

canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      angle,
      false,
      gradientPaint,
    );
  }

@override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
```

---

## 🧠 说明

- `SweepGradient` 用于创建环形渐变效果。
- `drawArc` 方法用于绘制进度条部分。
- `progress` 是 0 到 1 的值，表示进度。
- 你可以通过 `_updateProgress` 方法来动态更新进度。

---

## 📌 扩展建议

- 添加按钮控制进度（如：点击增加进度）。
- 使用 `AnimationController` 实现动画效果。
- 支持不同方向（顺时针/逆时针）。

---

如果你想要更高级的功能（比如带文字、动画、多种样式），也可以告诉我，我可以继续扩展这个例子 😊