activity_ring

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Eine Flutter-Bibliothek, die Entwicklern ermöglicht, kreisförmige Fortschrittsringe im Stil des Apple Watch zu erstellen. Diese visuell ansprechenden, animierten Ringe zeigen den Fortschritt auf kompakte und intuitive Weise und sind ideal zum Verfolgen von Zielen, Zeit oder Abschlussprozenten. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und sorgt für eine konsistente Benutzeroberfläche über Geräte hinweg. Es bietet anpassbare Farben, Strichbreiten und Animationseffekte, um den App-Themen zu entsprechen. Perfekt für Fitness-Apps, Dashboards oder jede Anwendung, die eine elegante Fortschrittsvisualisierung erfordert.

Anwendungsfälle

Fitness-Tracking-Apps
Dashboard-Widgets
Zielabschlussanzeigen
Zeitbasierte Fortschrittsanzeige
Interaktive Benutzeroberflächenelemente

Hauptmerkmale

Kreisförmige Fortschrittsringe im Stil des Apple Watch
Anpassbare Farben und Strichbreite
Glatte Animationen
Plattformübergreifende Unterstützung
Einfache API-Integration
Reaktionsfähiges Design

Geeignet für

Entwickler von Fitness- oder Wellness-Apps
Designer, die moderne UI-Komponenten suchen
Apps, die visuelle Fortschrittsrückmeldung benötigen
Plattformübergreifende Anwendungen
Projekte mit zielorientierten Schnittstellen

Hinweise

Erfordert Verständnis des Flutter-Painting- und Animationsystems
Könnte eine Leistungsoptimierung auf Geräten mit geringer Leistung erforderlich sein
Nur auf die kreisförmige Fortschrittsvisualisierung beschränkt
Nicht geeignet für komplexe Datenvisualisierung

Original-README

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

Activity Rings

Library to create Progress bars in Apple Watch style rings - Apple Watch Rings

To use, import package:activity_ring/activity_ring.dart.

This library is built with to be extremely customizable with low effort. Please check the API documentation if you get stuck anywhere.

Note: Do not let the auto brighten colors to exceed 3 rings as this will cause a runtime exception.

Example

There are several ways to create rings.

Using a single color

Ring(
  percent: 90,
  color: RingColorScheme(ringColor: Colors.red),
  radius: 80,
  width: 10,
  child: Center(child: Text('90%')),
)

RingColor

The above ring is automatically painted with gradients. To have a constant color just pass gradient: false to RingColorScheme.

Using a single gradient

Ring(
  percent: 90,
  color: RingColorScheme(ringGradient: [Colors.red, Colors.blue]),
  radius: 80,
  width: 10,
  child: Center(child: Text('90%')),
),

RingGradient

The above ring is automatically painted with gradient from colors given.

Using same color for a ring with different color for each ring

Ring(
  percent: 190,
  color: RingColorScheme(ringColors: [Colors.red, Colors.blue]),
  radius: 80,
  width: 10,
  child: Center(child: Text('190%')),
),

RingColors

The above ring is automatically painted with gradient from colors given, where each color in list represents that ring's color. To have a constant color just pass gradient: false to RingColorScheme.

Explicitly mentioning gradinet for each ring

Ring(
  percent: 190,
  color: RingColorScheme(ringGradients: [[Colors.red, Colors.yellow], [Colors.yellow, Colors.green]]),
  radius: 80,
  width: 10,
  child: Center(child: Text('190%')),
),

RingGradients

TODO

[ ] Create templates for apple colors
[ ] Add tests and coverage

Kategorien, Pakete und Repositories suchen

Paket installieren