activity_ring

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Uma biblioteca Flutter que permite aos desenvolvedores criar anéis de progresso circulares no estilo do Apple Watch. Esses anéis animados e visualmente atraentes exibem o progresso de forma compacta e intuitiva, ideais para rastrear metas, tempo ou porcentagens de conclusão. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo uma interface consistente entre dispositivos. Oferece cores personalizáveis, larguras de traço e efeitos de animação para combinar com os temas dos aplicativos. Perfeito para aplicativos de condicionamento físico, painéis de controle ou qualquer aplicativo que exija uma visualização elegante do progresso.

Casos de uso

Aplicativos de rastreamento de condicionamento físico
Widgets do painel
indicadores de conclusão de meta
Exibição de progresso baseada em tempo
Elementos de interface interativos

Principais recursos

Anéis circulares de progresso estilo Apple Watch
Cores e largura de traço personalizáveis
Animações suaves
Suporte multiplataforma
Integração simples de API
design responsivo

Indicado para

Desenvolvedores de aplicativos de fitness ou bem-estar
Designers procurando componentes de interface modernos
Aplicativos que precisam de feedback visual de progresso
Aplicações multiplataforma
Projetos com interfaces orientadas a objetivos

Considerações

Requer conhecimento do sistema de pintura e animação do Flutter
Pode ser necessário ajuste de desempenho em dispositivos de baixa potência
Limitado apenas à visualização de progresso circular
Não adequado para visualização de dados complexos

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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

Buscar categorias, pacotes e repositórios

Instalar pacote