Paketdetailsv2.4.0

fade_shimmer

Eine Fade-Shimmer-Bibliothek, um Ladeeffekte wie das neueste Facebook-Lade-Skelett-UI mit sanften Fade-Übergängen zu implementieren.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 7730
Likes: 225
Pub-Punkte: 160

Paket installieren

flutter pub add fade_shimmer

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Fade Shimmer ist ein Flutter-Paket, das glatte, animierte Ladeeffekte bietet, die von Facebooks Skeleton-UI inspiriert sind. Es verwendet Fade-Übergänge, um visuell ansprechende Platzhalter zu erstellen, die ideal für Ladezustände von Inhalten sind. Die Bibliothek unterstützt mehrere Plattformen und lässt sich nahtlos in bestehende Flutter-Anwendungen integrieren. Durch anpassbare Dauer, Farbe und Schimmer-Richtung verbessert sie die Benutzererfahrung während des Datenabrufs. Ihr leichtgewichtiges Design sorgt für minimalen Leistungseinfluss, während moderne, polierte Ladeanimationen bereitgestellt werden.

Anwendungsfälle

Lade Platzhalterbildschirme
Skeleton-UI für Listen und Karten
Inhalts-Ladeindikatoren
App-Onboarding-Bildschirme
Dynamische Datenabrufanzeige
Verbesserung der Benutzererfahrung bei Netzwerkverzögerungen

Hauptmerkmale

Glatt Übergangsanimationen mit Ausblenden
Anpassbare Schimmer-Richtung
Konfigurierbare Animationsdauer
Unterstützt mehrere Plattformen
Leicht und effizient
Einfache Integration mit bestehenden Widgets

Geeignet für

Entwickler, die moderne Benutzeroberflächen erstellen
Apps, die elegante Ladezustände erfordern
Teams, die UX-Konsistenz priorisieren
Projekte, die Skelettplatzhalter verwenden
Flutter-Anfänger erkunden Animationen

Hinweise

Kann eine Abstimmung für optimale Leistung auf Low-End-Geräten erfordern
Eingeschränkte Anpassungsmöglichkeiten jenseits grundlegender Animations-Eigenschaften
Nicht geeignet für komplexe interaktive Ladeszenarien
Abhängig vom Rendering-Pipeline von Flutter
Am besten mit statischen oder vorhersehbaren Layoutstrukturen verwenden

Original-README

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

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)