flutter_circular_progress_indicator

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein visuell ansprechender kreisförmiger Fortschrittsindikator für Flutter-Anwendungen, der die Benutzererfahrung während Ladezustände verbessern soll. Er bietet reibungslose Animationen und anpassbare Stile, was ihn ideal für die Anzeige des Fortschritts bei Aufgaben wie Datenabruf oder Dateiübertragung macht. Das Paket ist leichtgewichtig und kompatibel mit allen wichtigen Plattformen, einschließlich Mobilgeräte, Web und Desktop. Die einfache Integration über pub.dev macht es für Entwickler zugänglich, die eine stilvolle Ladekomponente ohne komplizierte Einrichtung suchen.

Anwendungsfälle

Ladeanzeiger in Formularen
Datenabruffortschritt
Datei-Upload/Download-Verfolgung
App-Startbildschirme
Fortschritt des Authentifizierungsflusses
Hintergrundaufgabenüberwachung

Hauptmerkmale

Glatte animierte kreisförmige Gestaltung
Anpassbare Farben und Strichbreite
Einfache Integration mit Flutter
Plattformübergreifende Kompatibilität
Unterstützt sowohl determinierte als auch indeterminierte Modi
Leichtgewichtig und leistungsstark

Geeignet für

Entwickler, die ansprechende Lade-UI suchen
Apps, die konsistente Fortschrittsfeedback erfordern
Projekte für mehrere Plattformen
UI-orientierte Flutter-Anwendungen
Einfache und elegante Ladekomponenten

Hinweise

Nur auf kreisförmige Form beschränkt
Keine integrierten Textbeschriftungen (benötigt benutzerdefinierte Widget-Umgebung)
Kann zusätzliche Stilisierung zur Markenorientierung erfordern
Nicht geeignet für nicht-kreisförmige Fortschrittsanforderungen
Abhängig von externem GitHub-Repository für Updates

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Load your data more beautiful.

Fixed Bugs

V 0.0.2 : setState error fixed

Installation

You just need to add flutter_circular_progress_indicator as a dependency in your pubspec.yaml file.

dependencies:
  flutter_circular_progress_indicator: ^0.0.2

Getting started

All features you can use :

Usage

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      spinDuration: Duration(seconds: 3),
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

spin

CircularProgressInd().normalCircular(
                    height: 55,
                    width: 55,
                    valueColor: Colors.deepOrange,
                    valueWidth: 5,
                    isSpining: true,
                  );

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      value: .4,
                      isSpining: true,
                      hasSpinReverse: true,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      backgroundColor: Colors.amber,
                      padding: EdgeInsets.all(10),
                      backgroundBorder:
                          Border.all(color: Colors.deepPurple, width: 3),
                      valueWidth: 6);

 CircularProgressInd().normalCircular(
                      height: 80,
                      width: 80,
                      isSpining: true,
                      value: .01,
                      secondaryColor: const Color.fromARGB(255, 23, 82, 27),
                      secondaryWidth: 10,
                      backgroundShape: BoxShape.rectangle,
                      backgroundRadius: 10,
                      backgroundColor: Colors.green,
                      padding: EdgeInsets.all(10),
                      valueColor: Colors.green[200],
                      backgroundBorder: Border.all(
                          color: const Color.fromARGB(255, 23, 82, 27),
                          width: 3),
                      valueWidth: 6);

Pakete, Repositories und App-Kategorien suchen

Paket installieren