パッケージ詳細v5.2.2

flutter_spinkit

Flutterでアニメーション化されたローディングインジケーターのコレクション。@tobiasahlin の SpinKit に強く影響されています。

AndroidiOSWebmacOSWindowsLinux

pub.dev API ドキュメントソースコード

30日間ダウンロード: 51.1万
いいね数: 4650
Pub ポイント: 140

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

flutter pub add flutter_spinkit

パッケージ概要

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

flutter_spinkit は、カスタマイズ可能なアニメーション付きのローディングインジケータを提供するFlutterパッケージです。SpinKitにインスパイアされ、さまざまなアプリケーション状況に適した視覚的に魅力的なスピナーとローダーを多数用意しています。このパッケージはAndroid、iOS、Web、macOS、Windows、Linuxなど、すべての主要プラットフォームをサポートしています。各インジケータはFlutterのレンダリングエンジンを使用して滑らかなアニメーションで構築されており、デバイス間で一貫したパフォーマンスを確保します。データフェッチ、ページ遷移、バックグラウンドタスク中のローディング状態を表示するのに最適です。

用途

API 呼び出し中にローディング状態を表示する
ページ遷移中のユーザー体験の向上
バックグラウンド操作の進行状況を表示する
アニメーション付きプレースホルダーでUIの美しさを向上させる
フォーム送信中にフィードバックを提供する

主な機能

30個以上の事前構築されたアニメーションスピンナー
カスタマイズ可能な色とサイズ
クロスプラットフォーム互換性
軽量で統合が簡単
組み込みアニメーションコントローラー
ダークモードテーマをサポートしています

適している対象

すぐに使えるロードインジケーターを探している開発者
一貫した読み込みビジュアルを必要とするアプリ
マイクロインタラクションに注目するUI/UXデザイナー
複数プラットフォーム向けのプロジェクト
迅速なUIフィードバック状態のプロトタイピング

注意事項

多くのインジケータを使用するとバンドルサイズが増加する可能性があります
カスタムアニメーションには、Flutterのアニメーションシステムについてより深い知識が必要です
一部のインジケーターは、非常に小さな画面ではうまくスケーリングされない可能性があります
基本プロパティを超えるカスタマイズは限られている
非常に高い頻度の更新には最適化されていません

元の README

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

✨ Flutter Spinkit

A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.

🎖 Installing

dependencies:
  flutter_spinkit: ^5.2.2

⚡️ Import

import 'package:flutter_spinkit/flutter_spinkit.dart';

🎮 How To Use

const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);

final spinkit = SpinKitFadingCircle(
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
);

final spinkit = SpinKitSquareCircle(
  color: Colors.white,
  size: 50.0,
  controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);

For more info, please, refer to the showcase.dart in the example.

🚀 Showcase

RotatingPlain	DoubleBounce	Wave	WanderingCubes	FadingFour	FadingCube
Pulse	ChasingDots	ThreeBounce	Circle	CubeGrid	FadingCircle
RotatingCircle	FoldingCube	PumpingHeart	HourGlass	PouringHourGlass	PouringHourGlassRefined
FadingGrid	Ring	Ripple	SpinningCircle	SpinningLines	SquareCircle
DualRing	PianoWave	DancingSquare	ThreeInOut	WaveSpinner	PulsingGrid

Some GIF images gotten from Android Spinkit.

🐛 Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.