Flutter Animation Progress Bar

Barre de progrès de l'animation de flutter

Ce package de widget de flux coloré vise à afficher une barre de progression d'animation dans un style réactif. Il prend également en charge la barre verticale et horizontale.

Flutter Create Contest

Ce package est également une soumission au concours Flutter Create. La règle de base de ce concours est de mesurer la taille totale du fichier de fléchette moins ou l'égalité de 5 Ko.

Après décompression le fichier compressé, exécutez la commande suivante pour mettre à jour les dépendances:

 flutter packages get

Pour évaluer la taille totale de tous les fichiers de fléchettes:

 find . -name "*.dart" ! -name "*test*"  | xargs cat | wc -c

Pour évaluer uniquement le code DART Package:

 find . -name "*.dart" ! -name "*test*" ! -path "*example*"  | xargs cat | wc -c

Pour exécuter une application d'exemple simple avec une taille totale de code de fléchette moins ou égal à 5 ​​Ko:

 cd example
flutter clean
flutter run

Application de redémarrage à chaud avec "R" pour rejouer l'animation

Pour exécuter l'exemple complet de l'application:

 cd example
mv lib/main.dart tmp && mv lib/main.dart.bk lib/main.dart && mv tmp lib/main.dart.bk
flutter clean
flutter run

Utilisation de boutons d'action flottante intégrés pour modifier la valeur et voir l'effet

Commencer

Afin d'utiliser ce package, importez

 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

L'implémentation de base peut être effectuée comme le code ci-dessous:

 import 'package:flutter/widgets.dart' ;
import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

void main () {
  runApp (
    Center (
        child : FAProgressBar (
      currentValue : 80 ,
      displayText : '%' ,
    )),
  );
}

Exemple d'application

Vous pouvez trouver plus d'exemples de l'application Exemple

API

Dans ce tableau, vous pouvez trouver tous les attributs fournis par ce package:

Attribut	Valeur par défaut	Description
Valeur de courant	0	Définissez la valeur actuelle de la barre de progression. Cette valeur doit être en état de tel que chaque fois que SetState () a été appelé, la barre de progression déclenchera une animation du dernier VALUE Current à New CurrentValue
maxvalue	100	Valeur maximale à afficher comme barre de progression. La valeur actuelle peut être supérieure à la valeur maximale
taille	30	La hauteur de la barre si la direction dans l'axe.horizontal. La largeur de la barre si la direction dans l'axe.
AnimadDuration	Durée const (millisecondes: 300)	Définissez la durée d'un cycle d'animation
direction	Axe.horizontal	La barre peut être dans l'axe.Horizontal ou Axe.
indirection verticale	Verticaldirection.down	Avec la direction verticale, la barre peut être verticaldirection.Up ou verticaldirerection.
frontière	8	Réglez le rayon de la frontière de la barre
frontière	null	Réglez le style de bordure de bar par boxborder
fond de fond	const Color (0x00ffffff)	Définir la couleur d'arrière-plan de la barre
Progrès	const Color (0xfffa7268)	Définir la couleur de la couleur
Progressgradient	null	Définissez la barre de progression. Remplace progressColor
ChangeColorValue	null	Définir une valeur que la couleur de progression doit être modifiée en [0 --- Blue ---- [ 70 ] -red-100]
ChangeProgressColor	const Color (0xff5f4b8b)	La couleur de la couleur qui progresse sera changée, chaque fois que Current Value supérieure à ChangeColorValue
affichage	null	Texte à afficher appartenant à CurrentValue. Exemples: % -> 20% °F -> 80°F
DisplayTextStyle	...	Textstyle de DisplayText

Objets

 class FAProgressBar {

  final double currentValue;
  final double maxValue;
  final double size;
  final Duration animatedDuration;
  final Axis direction;
  final VerticalDirection verticalDirection;
  final double borderRadius;
  final BoxBorder border;
  final Color backgroundColor;
  final Color progressColor;
  final Gradient progressGradient;
  final int changeColorValue;
  final Color changeProgressColor;
  final String displayText;
  final TextStyle displayTextStyle;
}

Retour

N'hésitez pas à laisser des commentaires pour aider à soutenir ce package?