Flutter Animation Progress Bar

Barra de progreso de animación de flutador

Este colorido paquete de widget de Flutter tiene como objetivo mostrar una barra de progreso de animación en estilo reactivo. También es compatible con la barra vertical y horizontal.

Flutter Crear concurso

Este paquete también es una presentación para Flutter Crear concurso. La regla básica de este concurso es medir el tamaño total del archivo DART menos o igual 5 kb.

Después de desactivar el archivo comprimido, ejecute el siguiente comando para actualizar dependencias:

 flutter packages get

Para evaluar el tamaño total de todos los archivos de DART:

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

Para evaluar solo el código de dardo de paquete:

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

Para ejecutar la aplicación de ejemplo simple con un tamaño total del código de dardo menos o igual 5 kb:

 cd example
flutter clean
flutter run

Aplicación de reinicio en caliente con "R" para reproducir la animación

Para ejecutar la aplicación de ejemplo completa:

 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

Uso de botones de acción flotante incorporados para cambiar el valor y ver el efecto

Empezando

Para usar este paquete, importe

 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

La implementación básica se puede hacer como el código a continuación:

 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 : '%' ,
    )),
  );
}

Aplicación de ejemplo

Puede encontrar más ejemplos de la aplicación de ejemplo

API

En esta tabla, puede encontrar todos los atributos proporcionados por este paquete:

Atributo	Valor predeterminado	Descripción
valor actual	0	Establezca el valor actual para la barra de progreso. Este valor debe estar en estado de modo que cada vez que se haya llamado a SetState () , la barra de progreso desencadenará una animación del último Value de Current a New CurrentValue
máximo	100	Valor máximo a mostrar como barra de progreso. El valor actual puede ser mayor que el valor máximo
tamaño	30	La altura de la barra si la dirección en el eje. Horizontal. El ancho de la barra si la dirección en el eje. Vertical
Duración animada	Duración constante (milisegundos: 300)	Establezca la duración de un ciclo de animación
dirección	Eje. Horizontal	La barra puede estar en el eje. Dirección horizontal o del eje.
dirección vertical	VerticalDirection.down	Con dirección vertical, la barra puede ser verticalDirection.up o verticalDirection. Dirección
fronterradio	8	Establecer el radio del borde de la barra
borde	null	Establezca el estilo de borde de la barra de Boxborder
beckcolor	const color (0x00fffff)	Establezca el color de fondo de la barra
Progresscolor	const color (0xfffa7268)	Establezca el color de progreso de la barra
progreso	null	Establezca la barra de gradiente que progresa. Anula progressColor
ChangecolorValue	null	Establezca un valor para que el color de progreso debe cambiarse a [0 --- Azul ---- [ 70 ] -Red-100]
ChangeProgressColor	const color (0xff5f4b8b)	Color a el que se cambiará el color progresivo, siempre que el valor actual sea mayor que ChangecolorValue
DisplayText	null	Texto para mostrar pertenencia con CurrentValue. Ejemplos: % -> 20% °F -> 80°F
DisplayTextStyle	...	TextStyle de DisplayText

Objetos

 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;
}

Comentario

¿No dude en dejar algún comentario para ayudar a apoyar este paquete?