Flutter 实现渐变弧形进度条

在Flutter开发中，构建一个具有视觉吸引力的、反映进展的圆形弧形进展条是一个常见需求。本文将具体介绍怎么运用Flutter和Dart言语完成这一功用。终究作用如图：

首先，咱们需要导入必要的包和库，比如dart:math和package:flutter/material.dart。这些库为制作和样式供给根底支撑。

接下来，创建一个ArcProgressPainter类，它继承自CustomPainter。这个类的核心是paint办法，用于制作进展条。咱们运用Canvas目标和Size目标来确认制作区域，并运用数学运算确认圆心、半径等参数。

此外，文章还将展现怎么运用线性突变（LinearGradient）来美化进展条，以及怎么计算视点和制作圆弧。这包含怎么根据进展动态改变圆弧的色彩和位置。

最终，咱们将创建一个ArcProgressBar组件，它包装了CustomPaint，并运用上面定义的ArcProgressPainter来完成视觉作用。

整个进程不只涉及根底的Flutter绘图技能，还包含一些高级的定制化元素，如色彩计算和动态布局调整。经过本文，读者可以学习怎么灵活运用Flutter结构的绘图能力，为自己的应用程序添加独特且富有表现力的UI组件。

完好代码如下：

import 'dart:math' as math;
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:otterlife/component/theme/extension.dart';
class ArcProgressPainter extends CustomPainter {
  final double progress;
  final Color backgroundColor;
  final double strokeWidth;
  final TextStyle textStyle;
  ArcProgressPainter({
    required this.progress,
    required this.backgroundColor,
    required this.strokeWidth,
    required this.textStyle,
  });
  @override
  void paint(Canvas canvas, Size size) {
    final gradientColors = [const Color(0xFFFFC75A), const Color(0xFF6DAFF9), const Color(0xFF31A7AE)];
    final gradient = LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: gradientColors,
    );
    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = math.min(size.width / 2, size.height / 2);
    Rect rect = Rect.fromCircle(center: center, radius: radius).inflate(-strokeWidth / 2);
    double degreesToRadians(num deg) => deg * (math.pi / 180.0);
    double startAngle = degreesToRadians(90 + 40);
    double sweepAngle = degreesToRadians(360 - 80);
    for (double i = 0; i < sweepAngle; i += 0.01) {
      double angle = startAngle + i;
      double colorPosition = i / sweepAngle;
      Color color = _calculateGradientColor(gradientColors, colorPosition);
      Paint segmentPaint = Paint()
        ..color = color
        ..strokeWidth = strokeWidth
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke;
      canvas.drawArc(
        rect,
        angle,
        0.01, // 制作小段的视点
        false,
        segmentPaint,
      );
    }
    double sliderAngle = startAngle + progress * sweepAngle;
    Offset sliderPosition = Offset(
      center.dx + (radius - strokeWidth / 2) * cos(sliderAngle),
      center.dy + (radius - strokeWidth / 2) * sin(sliderAngle),
    );
    double sliderRadius = 28 / 2;
    Paint sliderPaint = Paint()..color = _calculateSliderColor(progress); // Assuming you have this method
    canvas.drawCircle(sliderPosition, sliderRadius, sliderPaint);
    Paint whiteCenterPaint = Paint()..color = Colors.white;
    canvas.drawCircle(sliderPosition, 16 / 2, whiteCenterPaint);
  }
  Color _calculateGradientColor(List<Color> colors, double position) {
    int index = (position * (colors.length - 1)).floor();
    double localPosition = (position * (colors.length - 1)) - index;
    return Color.lerp(colors[index], colors[index + 1], localPosition) ?? colors.last;
  }
  Color _calculateSliderColor(double progress) {
    final colors = [const Color(0xFFFFC75A), const Color(0xFF6DAFF9), const Color(0xFF31A7AE)];
    progress = progress.clamp(0.0, 1.0);
    double colorPosition = progress * (colors.length - 1);
    int index = colorPosition.floor();
    int nextIndex = (index + 1).clamp(0, colors.length - 1);
    double t = colorPosition - index;
    return Color.lerp(colors[index], colors[nextIndex], t) ?? colors.first;
  }
  double convertRadiusToSigma(double radius) {
    return radius * 0.57735 + 0.5;
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
class ArcProgressBar extends StatelessWidget {
  final double progress;
  final double strokeWidth;
  const ArcProgressBar({
    super.key,
    required this.progress,
    this.strokeWidth = 16,
  });
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ArcProgressPainter(
        progress: progress,
        backgroundColor: Colors.red,
        strokeWidth: strokeWidth,
        textStyle: Colors.red,
      ),
    );
  }
}