Flutter Animation Progress Bar

Flattern Animation Progress Bar

Dieses farbenfrohe Flutter -Widget -Paket zielt darauf ab, eine Animations -Fortschrittsleiste im reaktiven Stil anzuzeigen. Es unterstützt auch die vertikale und horizontale Balken.

Flattern erstellen Wettbewerb

Dieses Paket ist auch eine Einreichung bei Flattern Create Contest. Die grundlegende Regel dieses Wettbewerbs ist die Messung der Gesamtdateigröße weniger oder gleich 5 KB.

Führen Sie den folgenden Befehl aus, um die Abhängigkeiten zu aktualisieren:

 flutter packages get

Um die Gesamtgröße aller DART -Dateien zu bewerten:

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

So bewerten Sie nur den Paketdartcode:

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

So führen Sie eine einfache Beispiel -App mit einer Gesamtgröße von Dart -Code weniger oder gleich 5 KB aus:

 cd example
flutter clean
flutter run

Hot -Neustart -App mit "R", um die Animation wiederzugeben

So führen Sie die vollständige Beispiel -App aus:

 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

Verwenden von integrierten Float-Aktions-Tasten, um den Wert zu ändern und den Effekt zu sehen

Erste Schritte

Um dieses Paket zu verwenden, importieren Sie

 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart' ;

Grundlegende Implementierung kann wie unter dem Code erfolgen:

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

Beispiel App

Sie können weitere Beispiele aus der Beispiel -App finden

API

In dieser Tabelle finden Sie alle von diesem Paket bereitgestellten Attribute:

Attribut	Standardwert	Beschreibung
CurrentValue	0	Legen Sie den aktuellen Wert für die Fortschrittsleiste fest. Dieser Wert sollte staatlich sein
MaxValue	100	Maximaler Wert, der als Fortschrittsbalken angezeigt wird. Der aktuelle Wert kann größer sein als der maximale Wert
Größe	30	Die Stangenhöhe, wenn Richtung in Achse.Horizontal. Die Balkenbreite, wenn Richtung in der Achse.VERTICAL
AnimationDuration	Const Dauer (Millisekunden: 300)	Legen Sie die Dauer für einen Animationszyklus ein
Richtung	Axis.horizontal	Die Balken kann in der Achse sein. Horizontal oder Achse.
vertikale Direktion	Vertikale Direktion.down	Mit vertikaler Richtung kann der Balken vertikaler Anweisungen oder vertikale Richtung sein.
Borderradius	8	Setzen Sie den Randradius des Bars
Grenze	null	Stellen Sie den Randstil des Bar durch Boxborder ein
Hintergrundkolor	const color (0x00ffffff)	Setzen Sie die BAL -Hintergrundfarbe ein
Fortschritt	const color (0xfffa7268)	Stellen Sie die Stange Fortschrittsfarbe ein
Fortschritt	null	Setzen Sie den Stabfassungsgradienten. Überschreibt progressColor
ChangeColorValue	null	Legen Sie einen Wert fest, der die Fortschrittsfarbe geändert werden sollte [0 --- blau ---- [ 70 ] -Red-100]
ChangeProgressColor	const color (0xff5f4b8b)	Farbe, dass die farbige Farbe in größerem Wert verändert wird, wenn es größer ist
DisplayText	null	Text zur Anzeige mit CurrentValue. Beispiele: % -> 20% °F -> 80°F
DisplayTextStyle	...	Textstyle of DisplayText

Objekte

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

Rückmeldung

Fühlen Sie sich frei, Feedback für die Unterstützung dieses Pakets zu hinterlassen?