搜尋套件、儲存庫與 APP 分類

flutter_spinkit 封面
套件詳情v5.2.2

flutter_spinkit

一組以 Flutter 動畫呈現的載入指示器。深受 @tobiasahlin 的 SpinKit 啟發。

AndroidiOSWebmacOSWindowsLinux
近 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設計師
  • 針對多個平台的專案
  • 快速原型設計使用者介面回饋狀態

使用建議

  • 使用許多指標可能會增加封包大小
  • 自定義動畫需要更深入地了解 Flutter 的動畫系統
  • 某些指標在非常小的螢幕上可能無法良好縮放
  • 超出基本屬性的自訂功能有限
  • 未針對極高頻率的更新進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

✨ Flutter Spinkit

Format, Analyze and Test codecov pub package

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.

❗️ Note

For help getting started with Flutter, view our online documentation.

For help on editing plugin code, view the documentation.

☀️ Authors

Jeremiah Ogbomo

Ayush Agarwal

⭐️ License

MIT License

所屬分類

原始碼儲存庫

使用此套件的專案