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

shimmer_animation のカバー
パッケージ詳細v2.2.2+1

shimmer_animation

このシャイマーアニメーションウィジェットは、簡単で美しいスケルトンローダーを簡単にプロジェクトに導入するのに役立ちます。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
1.2万
いいね数
517
Pub ポイント
160

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

flutter pub add shimmer_animation

パッケージ概要

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

ShimmerAnimationは、アプリ内にスケルトンローダーを実装するためのシンプルで洗練された方法を提供するFlutterパッケージです。開発者が滑らかでアニメーション付きのプレースホルダーUIを作成できるようにし、実際のコンテンツ読み込みの見た目を模倣することで、認識されるパフォーマンスとユーザー体験を向上させます。最小限の設定で、Android、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしています。ウィジェットは非常にカスタマイズ可能で、既存のFlutterプロジェクトにスムーズに統合できます。

用途

  • リストのプレースホルダを読み込んでいます
  • データ取得中に空の画面を防ぐ
  • 遅延読み込みのインターフェースでのUX向上
  • モダンでダイナミックなUIの作成
  • グリッドにコンテンツのスケルトンを表示する
  • リアルタイムデータの読み込みをシミュレートする

主な機能

  • スムーズなシャイマーのアニメーション効果
  • クロスプラットフォーム互換性
  • Flutterとの簡単な統合
  • カスタマイズ可能な色とグラデーション
  • さまざまなコンテナの形状に対応しています
  • 軽量でパフォーマンスに優れる

適している対象

  • ビジュアルの磨きを求めるUI/UXデザイナー
  • データ集約型アプリケーションを開発する開発者
  • 認識されたパフォーマンスに焦点を当てるチーム
  • 現代のロード状態を必要とするプロジェクト
  • 動的または非同期コンテンツを備えたアプリ
  • インタラクティブなインターフェースのプロトタイピング

注意事項

  • 複雑なレイアウトには追加のスタイリングが必要になる場合があります
  • 静的プレースホルダーコンテンツには適していない
  • 非常に大きなリストへのパフォーマンスの影響
  • 基本的なアニメーションを超えるカスタマイズは限られている
  • 適切な読み込み状態管理と併用すると最適です
  • Flutter のウィジェットツリーの理解が必要です

元の README

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

Shimmer Animation

pub package Libraries.io dependency status for latest release License

Supports Null Safety

This shimmer animation widget can help you bring simple yet beautiful skeleton loaders to your project with ease.

Shimmer is very widely used as the default animation for skeleton loaders or placeholder widgets throughout the development community. Therefore, having an easy to use, yet customizable widget ready to use for Android, iOS and Web, gives developers an advantage to focus on their actual functionality, let shimmer make the loading experience smoother.

Examples

An example can be found in the example directory of this repository.

A list of detailed examples can be found in this Examples Repository

Full Screen Loading Widgets Loading Buttons

How to use

Add shimmer_animation to pubspec.yaml of your project:

dependencies:
  shimmer_animation: ^2.1.0

Import it in your Dart code:

import 'package:shimmer_animation/shimmer_animation.dart';

Wrap any widget with Shimmer() widget to apply animaton:

  Shimmer(
    child: Container(
      color: Colors.deepPurple,
    ),
  ),

A number of parameters can be passed to customise the look and feel of this animation:

  Shimmer(
    duration: Duration(seconds: 3), //Default value
    interval: Duration(seconds: 5), //Default value: Duration(seconds: 0)
    color: Colors.white, //Default value
    colorOpacity: 0, //Default value
    enabled: true, //Default value
    direction: ShimmerDirection.fromLTRB(),  //Default Value
    child: Container(
      color: Colors.deepPurple,
    ),
  ),
Parameters:
  • @required child : accepts a child Widget over which the animation is to be displayed
  • color : accepts a parameter of type Color and sets the color of the animation overlay. Default value is Colors.white
  • color : accepts a parameter of type double and sets the Opacity of the color of the animation overlay. Default value is 0.3
  • enabled : accepts a bool which toggles the animation on/off. Default value is true
  • duration : accepts a Duration that would be the time period of animation. Default value is Duration(seconds: 3)
  • interval : accepts a Duration that would be the interval between the repeating animation. Default value is Duration(seconds: 0) i.e. no interval
  • direction : accepts a ShimmerDirection and aligns the animation accordingly. Default value is ShimmerDirection.fromLBRT()

A detailed API Reference can be found here.

License

MIT License.

カテゴリー

ソースリポジトリ

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