Question

我正在尝试在Flutter中制作Arc Progress栏。下一张图片是我想要实现的

我只能在窗口小部件目录中找到CircularProgressIndicator来应对问题。

我厌倦了以下包裹 https://pub.dartlang.org/packages/percent_indicator

但无法达到弧进度条。

任何帮助将不胜感激

Answer 1

说明：您可以在堆栈中使用两个circularProgressIndicator小部件和一个Text Widget，并向value提供circularProgressIndicator使其像进度条一样。

这是我的项目存储库中的

import 'package:flutter/material.dart';

class DownloadProgressIndicator extends StatelessWidget {

  DownloadProgressIndicator({
    this.color =Colors.blue,
    this.backgroundColor = Colors.black12,
    this.content,
    this.value,
    this.strokeWidth = 4.0,
  });

  final Color color;
  final Color backgroundColor;
  final Widget content;
  final double value;
  final double strokeWidth;

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        backgroundColor != null ? 
        CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(backgroundColor),
          value: 1,
          strokeWidth: strokeWidth,
        ): Container(),
        CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(color),
          value: value,
          strokeWidth: strokeWidth,
        ),
        content != null ? 
        Center(
          child: content,
        ) : Container(),
      ],
    );
  }
}

以value的形式传递所需的进度。如果需要以不同的角度开始弧线，则可以将此小部件放在Transform.rotate小部件内。不太精确，但是可以解决您的问题。

更新：观察图像后您可以将一些值传递到背景circularProgressIndicator并将其旋转以从底部开始。假设您的背景弧线从0到75。现在您需要标准化进度值（例如value * 75/100），以便前景进度指示器的落脚介于0到75之间。也旋转前景弧。

Answer 2

您可以像这样使用CircularPercentIndicator：

         @override
      Widget build(BuildContext context) {

        double yourPercentage = 0.5;

        return Scaffold(
          body: Center(
            child: CircularPercentIndicator(
              radius: 100.0,
              startAngle: 220,
              percent: 0.775 * yourPercentage,
              animation: true,
              backgroundColor: Colors.transparent,
              center: Text("50%"),
            ),
          ),
        );
      }

只需根据需要更改yourPercentage变量。

更新（16/05/2019）

我更新了我的代码（尚未在发布中发布），但是您可以这样使用：

在pubspec.yaml中

 percent_indicator:
    git:
      url: https://github.com/diegoveloper/flutter_percent_indicator.git

代码

    CircularPercentIndicator(
                  radius: 120.0,
                  animation: true,
                  animationDuration: 2000,
                  lineWidth: 10.0,
                  percent: 0.5,
                  reverse: true,
                  arcBackgroundColor: Colors.teal,
                  arcType: ArcType.FULL,
                  center: Text(
                    "20 hours",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0),
                  ),
                  circularStrokeCap: CircularStrokeCap.butt,
                  backgroundColor: Colors.transparent,
                  progressColor: Colors.red,
                ),

Answer 3

您可以使用Flutter CustomPaint类来实现此目的。这将与您在图像链接中共享的弧线相同。在这里，百分比值可以是 0 - 0.7 ;

中的任何一个

   class ArcIndicator extends CustomPainter{
    final Color bgColor;
    final Color lineColor;
    final double percent;
    final double width;
   ArcIndicator({
    this.bgColor,
    this.lineColor,
    this.percent,
    this.width
   });
   @override
   void paint(Canvas canvas, Size size) {
     Paint bgLine  = Paint()..color = bgColor
     ..strokeCap=StrokeCap.round
     ..strokeWidth = width
     ..style = PaintingStyle.stroke;
    Paint completedLine  = Paint()..color = lineColor
     ..strokeCap=StrokeCap.round
     ..strokeWidth = width
     ..style = PaintingStyle.stroke;

Offset offset = Offset(size.width/2, size.height /2);
double radius = min(size.width /2 ,size.height/2);
canvas.drawArc(
    Rect.fromCircle(center: offset,radius: radius),
    2.5,
    2*pi*0.7,
    false,
    bgLine);
  double sweepAngle = 2*pi*percent;
  canvas.drawArc(
  Rect.fromCircle(center: offset,radius: radius),
  2.5,
  sweepAngle,
  false,
   completedLine);
  }

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

 }

如何在Flutter中制作ArcProgress Bar？

3 个答案: