Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de fancy_shimmer_image
Detalhes do pacotev2.0.3

fancy_shimmer_image

Pacote para uso fácil de imagens que são automaticamente cacheáveis e têm um belo efeito de brilho em tempo real (mas pode ser configurado) durante o carregamento

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
3,3 mil
Curtidas
219
Pontos Pub
140

Instalar pacote

flutter pub add fancy_shimmer_image

Visão geral do pacote

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

Um pacote Flutter que simplifica o carregamento de imagens com um efeito shimmer embutido durante o carregamento, melhorando a experiência do usuário. Ele gerencia automaticamente o cache de imagens e suporta várias fontes de imagem, incluindo URLs e recursos. O efeito shimmer é personalizável, permitindo que os desenvolvedores ajustem cores, duração e estilo de animação. Ideal para melhorar o desempenho percebido em listas e grades onde as imagens são carregadas assincronamente.

Casos de uso

  • Carregando imagens em listas roláveis
  • Exibindo efeitos de espaço reservado em layouts de grade
  • Melhorando o feedback da interface durante o carregamento de imagem
  • Criando transições suaves em interfaces com muitas imagens
  • Melhorando o desempenho percebido em aplicativos dependentes de rede

Principais recursos

  • Cache automático de imagem
  • Animação de brilho configurável
  • Suporta imagens de rede e ativos
  • Cores e duração de brilho personalizáveis
  • Falha de carregamento embutida
  • Leve e fácil integração

Indicado para

  • Desenvolvedores procurando espaços reservados de imagem rápidos
  • Aplicativos com carregamento de imagem de alta frequência
  • Designers de interface focados no acabamento visual
  • Projetos que exigem mínimo boilerplate para carregamento de imagem
  • Equipes que priorizam a experiência do usuário durante operações assíncronas

Considerações

  • Pode aumentar levemente o tamanho inicial do pacote
  • O efeito de brilho pode não ser adequado para todos os temas de design
  • Requer acesso à internet para carregar imagens remotas
  • Personalização limitada além das configurações básicas de animação
  • Não otimizado para coleções muito grandes de imagens sem tratamento adicional

README original

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

Buy Me A Coffee

Introduction

Package created for the purpose of uploading images from the internet, giving the possibility of showing a beautiful Shimmer animation while the images are not loading. And it is still possible to create a widget to be shown in case the image upload fails for some reason.

This package is basically a union of two known packages:

Basic Usage

You can use the package on the fly by simple passing a URL of an image to the FancyShimmerImage widget.

FancyShimmerImage(  
  imageUrl: 'https://images.unsplash.com/photo-1465572089651-8fde36c892dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',  
),

That will produce a image that's is cacheable by default and that has a default (grey) Shimmer animation. Similar to result below:

enter image description here

More Advanced Usage

If you don't like the default widget behavior, you can set the background colors of the image, the color of the shimmer base effect, and the color of the highlighted effect.

FancyShimmerImage(  
  imageUrl: 'https://static.businessinsider.sg/2018/12/12/5c1c90f8e04d6243c7019cf6.png',  
  shimmerBaseColor: randomColor(),  
  shimmerHighlightColor: randomColor(),  
  shimmerBackColor: randomColor(),  
)

By randomizing the colors you can have a result similar to this:

enter image description here

Other thing you can do is to configure the direction of the Shimmer and it's speed. In the above example i configured it to have top to bottom direction and 300 milliseconds of speed.

enter image description here

One last step you can configure is to configure the widget that will appear in case the image upload fails for some reason. In this case just pass the desired widget in the errorWidget parameter. If no value is passed, a default error widget will be used.

FancyShimmerImage(  
  imageUrl: 'https://static.businessinsider.sg/2018/12/12/5c1c90f8e04d6243c7019cf6.png',  
  errorWidget: Image.network('https://i0.wp.com/www.dobitaobyte.com.br/wp-content/uploads/2016/02/no_image.png?ssl=1'),
)

enter image description here

Categorias

Espaço reservado

Dependências

Lista de dependências 2 itens

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.