Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von fancy_shimmer_image
Paketdetailsv2.0.3

fancy_shimmer_image

Paket für die einfache Verwendung von Bildern, die automatisch zwischengespeichert werden und während des Ladens über einen schönen, aber konfigurierbaren Shimmer-Effekt verfügen

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
3320
Likes
219
Pub-Punkte
140

Paket installieren

flutter pub add fancy_shimmer_image

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das das Laden von Bildern mit einem integrierten Shimmer-Effekt während des Ladevorgangs vereinfacht und die Benutzererfahrung verbessert. Es verarbeitet automatisch das Bild-Caching und unterstützt verschiedene Bildquellen wie URLs und Ressourcen. Der Shimmer-Effekt ist anpassbar, sodass Entwickler Farben, Dauer und Animationsstil anpassen können. Ideal zur Verbesserung der wahrgenommenen Leistung in Listenansichten und Gittern, bei denen Bilder asynchron geladen werden.

Anwendungsfälle

  • Bilder in scrollbaren Listen laden
  • Platzhaltereffekte in Rasterlayouts anzeigen
  • Verbesserung der Benutzeroberflächenrückmeldung während des Bildladens
  • Glatte Übergänge in bildintensiven Benutzeroberflächen erstellen
  • Verbesserung der wahrgenommenen Leistung in netzwerkabhängigen Anwendungen

Hauptmerkmale

  • Automatisches Bild-Caching
  • Konfigurierbare Schimmeranimation
  • Unterstützt Netzwerk- und Asset-Bilder
  • Anpassbare Schimmerfarben und Dauer
  • Eingebaute Fallback für fehlgeschlagene Ladevorgänge
  • Leichtgewichtig und einfache Integration

Geeignet für

  • Entwickler, die schnelle Bildplatzhalter suchen
  • Apps mit hochfrequentem Bildladen
  • UI-Designer, die sich auf visuelle Aufbereitung konzentrieren
  • Projekte, die minimales Boilerplate für das Laden von Bildern erfordern
  • Teams, die bei asynchronen Operationen die Benutzererfahrung priorisieren

Hinweise

  • Kann die anfängliche Paketgröße leicht erhöhen
  • Der Schimmer-Effekt ist möglicherweise nicht für alle Designthemen geeignet
  • Benötigt Internetzugang zum Laden von Remote-Bildern
  • Begrenzte Anpassungsmöglichkeiten außerhalb der grundlegenden Animations-Einstellungen
  • Nicht für sehr große Bildsammlungen ohne zusätzliche Behandlung optimiert

Original-README

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

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

Kategorien

Platzhalter

Abhängigkeiten

Abhängigkeiten 2 Einträge

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.