搜索插件、代码仓与 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

所属分类

源码仓库

使用此插件的项目