Ladeanzeige mit ProgressIndicator in Flutter

Wenn der Nutzer deiner Flutter App über den Fortschritt eines Vorgangs, oder einfach nur darüber, dass gerade ein Vorgang ausgeführt wird, informiert werden soll, gibt es in Flutter die Möglichkeit, genau das mit einem ProgressionIndicator zu tun.

ProgressIndicator die den Fortschritt eines Vorgangs zeigen

Um einen fortschittszeigenden Progressindicator erscheinen zu lassen, muss man dieses lediglich als Widget an der gewünschten Stelle hinzufügen:

Dabei gibt es Runde:

CircularProgressIndicator(
    value: _value,
    backgroundColor: Colors.red,
    color: colors.green,
    strokeWidth: 10,
),

Und Balkenförmige:

LinearProgressIndicator(
    value: _value,
    backgroundColor: Colors.red,
    color: colors.green,
),

value repräsentiert den Fortschritt im Bereich [0,1]. backgroundColor ist die Farbe, die der noch nicht aufgefüllte Teil des Indikators hat, color die die der gefüllte Teil hat. strokeWidth ist die Breite des Indikators (Nur für CircularProgressIndicator).

ProgressIndicator zeigen das ein Vorgang bearbeitet wird

Häufiger anzutreffen sind ProgressIndikatoren, welche nur zeigen, dass die App arbeitet, um keine Ressourcen an die Berechnung des Fortschritts zu verschwenden. Diese zu benutzen ist ähnlich einfach wie die Forschrittsanzeigenden. Man muss einfach nur den value weglassen.

Auch hier gibt es deshalb wieder Runde:

CircularProgressIndicator(
    backgroundColor: Colors.red,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
    strokeWidth: 10,
),

Und Balkenförmige:

LinearProgressIndicator(
    backgroundColor: Colors.red,
),

Zu beachten ist noch, dass es das Attribut color nicht mehr gibt. Stattdessen kann man, falls gewünscht, mit AlwaysStoppedAnimation(color) eine statische Farbe auswählen oder mit einem AnimationController einen dynamischen Farbübergang für den Indikator auswählen.

Dazu muss dieser zunächst erstellt werden:

animationController = AnimationController(
    vsync: this,
    duration: Duration(seconds: 15),
)
    ..addListener(
    () {
        setState(() {});
    },
    )
    ..repeat();

duration gibt an wie lange der Übergang dauert, repeat, dass der Vorgang (der Farbübergang) permanent wiederholt wird (falls gewüsncht kann repeat reverse=true mitgegeben werden, um den Vorgang abwechselnd vorwärts und rückwärts zu zeigen).

Diesem ist es möglich, einen Farbübergang zu animieren, der dem Indikator hinzugefügt werden kann.

LinearProgressIndicator(
        backgroundColor: colorList[2],
        valueColor: animationController.drive(
            ColorTween(
                begin: Colors.red,
                end: Colors.blue,
            ),
        ),
    ),