Detalhes do pacotev2.4.0

fade_shimmer

Uma biblioteca de shimmer fade para implementar efeitos de carregamento como o novo UI de esqueleto de carregamento do Facebook com transições suaves de desvanecimento.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 7,7 mil
Curtidas: 225
Pontos Pub: 160

Instalar pacote

flutter pub add fade_shimmer

Visão geral do pacote

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

Fade Shimmer é um pacote Flutter que oferece efeitos de carregamento suaves e animados inspirados na interface em esqueleto do Facebook. Utiliza transições de desvanecimento para criar espaços reservados visualmente atraentes, ideais para estados de carregamento de conteúdo. A biblioteca é compatível com múltiplas plataformas e se integra perfeitamente em aplicativos Flutter existentes. Com duração, cor e direção de brilho personalizáveis, ela melhora a experiência do usuário durante a busca por dados. Seu design leve garante impacto mínimo no desempenho, ao mesmo tempo em que oferece animações de carregamento modernas e refinadas.

Casos de uso

Carregando telas de espaço reservado
UI de esqueleto para listas e cartões
Indicadores de carregamento de conteúdo
telas de introdução do aplicativo
Busca dinâmica de dados exibe
Melhorando a experiência do usuário durante atrasos de rede

Principais recursos

Animações de transição suave de desvanecimento
Direção de brilho personalizável
Duração de animação configurável
Suporta múltiplas plataformas
Leve e eficiente
Integração fácil com widgets existentes

Indicado para

Desenvolvedores construindo interfaces modernas
Aplicativos que exigem estados de carregamento elegantes
Equipes priorizando consistência da UX
Projetos usando placeholders de esqueleto
Iniciantes do Flutter explorando animações

Considerações

Pode exigir ajustes para desempenho ótimo em dispositivos de baixa gama
Personalização limitada além das propriedades básicas de animação
Não adequado para cenários complexos de carregamento interativo
Depende do pipeline de renderização do Flutter
Melhor usado com estruturas de layout estáticas ou previsíveis

README original

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

FadeShimmer

A customizable Flutter package that provides elegant shimmer loading effects with smooth fade transitions. Perfect for creating skeleton screens while your content is loading.

Demo

FadeShimmer Demo

Features

🎨 Customizable colors and dimensions
🌓 Built-in light and dark themes
⏱️ Configurable animation duration
🌊 Support for staggered animations with delay parameter
🔄 Synchronized animations across multiple shimmer elements
🔘 Convenient factory for creating circular shimmer effects

Installation

Add fade_shimmer to your pubspec.yaml file:

dependencies:
  fade_shimmer: ^2.3.0

Run the following command to install:

flutter pub get

Usage

Import the package

import 'package:fade_shimmer/fade_shimmer.dart';

Basic Usage

Create a rectangular shimmer

FadeShimmer(
  height: 8,
  width: 150,
  radius: 4,
  fadeTheme: FadeTheme.light,
)

Create a circular shimmer (for avatars/profile pictures)

FadeShimmer.round(
  size: 60,
  fadeTheme: isDarkMode ? FadeTheme.dark : FadeTheme.light,
)

Custom colors

FadeShimmer(
  height: 8,
  width: 150,
  radius: 4,
  highlightColor: Color(0xffF9F9FB),
  baseColor: Color(0xffE6E8EB),
)

Advanced Usage

Staggered animation effect

Create a wave-like loading effect by adding delays to each shimmer element:

Column(
  children: [
    FadeShimmer(
      height: 8,
      width: 150,
      radius: 4,
      millisecondsDelay: 0,
      fadeTheme: FadeTheme.light,
    ),
    SizedBox(height: 8),
    FadeShimmer(
      height: 8,
      width: 170,
      radius: 4,
      millisecondsDelay: 300, // 300ms delay
      fadeTheme: FadeTheme.light,
    ),
    SizedBox(height: 8),
    FadeShimmer(
      height: 8,
      width: 120,
      radius: 4,
      millisecondsDelay: 600, // 600ms delay
      fadeTheme: FadeTheme.light,
    ),
  ],
)

Changing animation duration

You can change the global animation duration for all shimmer widgets:

// Change animation duration to 3 seconds (default is 1 second)
FadeShimmer.animationDurationInMillisecond = 3000;

Note: This change affects all FadeShimmer widgets in your application.

Customization

Available Properties

Property	Type	Description
`width`	`double`	Width of the shimmer container (required)
`height`	`double`	Height of the shimmer container (required)
`radius`	`double`	Border radius of the shimmer container (default: 0)
`fadeTheme`	`FadeTheme`	Predefined theme (light or dark)
`highlightColor`	`Color`	The brighter color that the shimmer transitions to
`baseColor`	`Color`	The darker color that the shimmer starts with
`millisecondsDelay`	`int`	Delay before the animation starts (default: 0)