我无法复制下面的图片。梯度和进度指示器的麻烦

Question

1. 我想将以下背景渐变应用于我的应用程序。另外，我希望每当用户升级时渐变的颜色都会改变。

2. 在步骤指示器中，我无法使圆圈重复。也就是说，如果步数超过 10,000 步，那么圆圈将以更深的阴影重复。

3. 另外，如何向步骤进度指示器添加图像或图标？

到目前为止，我只实现了进度指示器，在 10,000 步后也无法正常工作。

Answer 1

您可以尝试自定义这个。我试着让

CustomProgressLoader

像你的一样。

class CustomProgressLoader extends StatelessWidget {
  final double progress; // Progress value between 0 and 1

  const CustomProgressLoader({Key? key, required this.progress}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 100,
        height: 100,
        child: CustomPaint(
          painter: ProgressLoaderPainter(progress: progress),
        ),
      ),
    );
  }
}

class ProgressLoaderPainter extends CustomPainter {
  final double progress;
  final Color backgroundColor;
  final Color progressColor;

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

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

    // Draw the background circle
    final Paint backgroundPaint = Paint()
      ..color = backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;
    canvas.drawCircle(center, radius, backgroundPaint);

    // Draw the progress arc
    final double sweepAngle = progress * 360;
    final Paint progressPaint = Paint()
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -90 * (3.1415926535897932 / 180),
      sweepAngle * (3.1415926535897932 / 180),
      false,
      progressPaint,
    );

    // Draw the pipe at the end of the progress
    final double pipeLength = 15;
    final double pipeAngle = 90 - sweepAngle;
    final Offset pipeStart = Offset(
      center.dx + radius * (1 - (pipeLength / size.width)) * (progress == 1 ? 1 : -1),
      center.dy,
    );
    final Offset pipeEnd = Offset(
      pipeStart.dx + pipeLength,
      pipeStart.dy,
    );
    final Paint pipePaint = Paint()
      ..color = progressColor
      ..strokeWidth = strokeWidth;
    canvas.drawLine(pipeStart, pipeEnd, pipePaint);
  }

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