1
votes

Comment faire ArcProgress Bar en Flutter?

J'essaie de créer une barre de progression d'arc dans Flutter. L'image suivante est ce que je veux réaliser

Je ne peux trouver CircularProgressIndicator que dans le catalogue de widgets pour le flutter.

J'ai fatigué le paquet suivant https://pub.dartlang.org/packages/percent_indicator

mais n'a pas pu atteindre la barre de progression de l'arc.

Toute aide serait appréciée

flutter dart

0 commentaires

3 Réponses :

2
votes

Vous pouvez utiliser le CircularPercentIndicator comme ceci:

    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,
                ),

Modifiez simplement la variable yourPercentage en fonction de vos besoins.

MISE À JOUR (16/05/2019)

J'ai mis à jour mon code (pas encore publié sur pub), mais vous pouvez l'utiliser comme ceci:

Dans pubspec.yaml

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

Code

         @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%"),
            ),
          ),
        );
      }

2 commentaires

ce n'est pas une barre de progression d'arc, c'est une barre de progression circulaire complète. Je veux quelque chose comme ça i.stack.imgur.com/mLjUe.png

@diegoveloper je dois également appliquer une couleur d'arrière-plan et si j'applique une couleur d'arrière-plan, elle apparaît sous la forme d'une barre de progression circulaire complète et pourquoi avez-vous multiplié 0,775 pour précenter la propriété

1
votes

Explication: Vous pouvez utiliser deux widgets circularProgressIndicator et un widget texte à l'intérieur d'une pile et fournir la valeur à circularProgressIndicator code> pour qu'il ressemble à une barre de progression.

Ceci provient de mon dépôt de projet.

 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(),
      ],
    );
  }
}
  Passez la progression requise en tant que  valeur . Si vous avez besoin de démarrer l'arc à un angle différent, vous pouvez placer ce widget dans un widget  Transform.rotate . Pas exact mais cela résoudra votre problème. 
  Mise à jour: après avoir observé votre image
Vous pouvez passer une valeur à l'arrière-plan  circularProgressIndicator  et le faire pivoter pour commencer par le bas.
Supposons que votre arc d'arrière-plan passe de 0 à 75. Vous devez maintenant normaliser votre valeur de progression (par exemple, valeur * 75/100) pour qu'elle tombe entre 0 et 75 pour votre indicateur de progression au premier plan. faire également pivoter l'arc de premier plan.

3 commentaires

Merci pour votre réponse, mais ce n'est pas exactement ce que les questions spécifient. Il / Elle veut une sortie quelque chose comme ceci i.stack.imgur.com/mLjUe.png

Oui je savais et déjà mentionné. C'est très proche de ce dont il / elle a besoin juste besoin de quelques modifications pour tourner et limiter les progrès dans une certaine mesure.

gist.github.com/netsmertia/1dd81122a6f7001e96d7b69485834b40 c'est ce que je veux dire par petite modification.

0
votes

Vous pouvez y parvenir en utilisant la classe Flutter CustomPaint comme celle-ci. Cela créera le même arc que celui que vous avez partagé dans le lien d'image. Ici, la valeur en pourcentage peut être comprise entre 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;
 }

 }

0 commentaires