Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de odometer
Detalhes do pacotev3.0.0

odometer

Widgets altamente personalizáveis que você pode usar para transições de números e animações de contador.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
836
Curtidas
100
Pontos Pub
150

Instalar pacote

flutter pub add odometer

Visão geral do pacote

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

Odometer é um pacote Flutter que fornece widgets altamente personalizáveis para transições suaves de números e animações de contador. Permite que desenvolvedores criem exibições numéricas visualmente envolventes, como contagens regressivas, contadores de pontuação ou atualizações dinâmicas de valores, com efeitos de animação elegantes. O pacote oferece várias opções de estilização, incluindo tamanho do dígito, cor, espaçamento e duração da animação, tornando-o ideal para painéis, jogos ou visualizações de dados em tempo real. Desenvolvido com desempenho em mente, funciona perfeitamente em plataformas Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

  • Rastreamento em tempo real da pontuação
  • Cronômetros de contagem regressiva
  • Exibição de dados dinâmicos
  • Métricas do painel
  • Contadores de pontuação do jogo
  • Estatísticas animadas

Principais recursos

  • Animações suaves de transição de número
  • Aparência personalizável dos dígitos
  • Velocidade de animação configurável
  • Suporte para números negativos
  • integração de design responsivo
  • Compatibilidade multiplataforma

Indicado para

  • Recursos de gamificação
  • painéis de visualização de dados
  • Elementos de interface do usuário interativos
  • Aplicativos educacionais
  • Rastreadores de eventos ao vivo

Considerações

  • Pode afetar o desempenho com muitas instâncias
  • Requer ajuste cuidadoso para atualizações de alta frequência
  • Limitado a valores numéricos apenas
  • Não adequado para transições não numéricas
  • Melhor usado com fontes de dados estáveis

README original

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

Build Status pub stars style: lint

Odometer

The package which was inspired by the package Odometer js.

Examples of counter animation customization are made using this package:

Examples Gif

In this package you will find pre-built widgets:

  • AnimatedSlideOdometerNumber
  • SlideOdometerTransition

and high modifiable widgets:

  • AnimatedOdometer
  • OdometerTransition

AnimatedSlideOdometerNumber

The ImplicitlyAnimatedWidget uses the AnimatedOdometer with the sliding and fading digits transitions.

   AnimatedSlideOdometerNumber(
     numberTextStyle: TextStyle(fontSize: 15),
     odometerNumber: OdometerNumber(_counter),
     duration: Duration(seconds: 1))

SlideOdometerTransition

The ExplicitlyAnimatedWidget uses the OdometerTransition with the sliding and fading digits transitions.

    SlideOdometerTransition(
      numberTextStyle: TextStyle(fontSize: 15),
      odometerAnimation: _odometerAnimation,
      duration: Duration(seconds: 1))

Base widgets AnimatedOdometer and OdometerTransition

The AnimatedOdometer is based on implicit animation, and the OdometerTransition is based on explicit animation. To customize the odometer, you need to use two OdometerAnimationTransitionBuilders for new and old numbers. You will have access to:

  • The digit
  • The digit place
  • The animation progress of this digit

Categorias

Animação e Transição

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.