パッケージ、リポジトリ、アプリカテゴリを検索

fancy_shimmer_image のカバー
パッケージ詳細v2.0.3

fancy_shimmer_image

画像の使い方を簡単にするパッケージで、自動的にキャッシュされ、読み込み時に美しいオンザフライ(ただし設定可能)のシャイマー効果を持つ

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
3320
いいね数
219
Pub ポイント
140

パッケージをインストール

flutter pub add fancy_shimmer_image

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutterパッケージで、ロード中に組み込みのシャイマー効果を備えて画像の読み込みを簡素化し、ユーザー体験を向上させます。画像キャッシュを自動的に処理し、URLやアセットなどさまざまな画像ソースをサポートします。シャイマー効果はカスタマイズ可能で、開発者は色、期間、アニメーションスタイルを調整できます。非同期で画像を読み込むリストビューおよびグリッドでの認識されるパフォーマンス向上に最適です。

用途

  • スクロール可能なリストに画像を読み込む
  • グリッドレイアウトでプレースホルダーエフェクトを表示する
  • 画像の読み込み中のUIフィードバックの向上
  • 画像が多く含まれるインターフェースでのスムーズなトランジションの作成
  • ネットワークに依存するアプリにおけるパフォーマンスの認識向上

主な機能

  • 自動画像キャッシュ
  • 設定可能なきらめきアニメーション
  • ネットワークおよびアセットイメージをサポートしています
  • カスタマイズ可能なシャイマーの色と期間
  • 失敗した読み込みのための組み込みフォールバック
  • 軽量で簡単に統合可能

適している対象

  • 迅速な画像プレースホルダーを求める開発者
  • 高頻度の画像読み込みを持つアプリ
  • 視覚的な仕上げに注力するUIデザイナー
  • 画像の読み込みに最小限のボイラープレートが必要なプロジェクト
  • 非同期操作中にユーザー体験を最優先にするチーム

注意事項

  • 初期のバンドルサイズをわずかに増加させる可能性があります
  • シャイマー効果は、すべてのデザインテーマに適しているとは限りません
  • リモート画像の読み込みにはインターネット接続が必要です
  • 基本的なアニメーション設定以外のカスタマイズは限られている
  • 追加の処理がなければ、非常に大きな画像コレクションには最適化されていません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

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

カテゴリー

依存関係

依存関係一覧 2 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。